/* ============================================
   MOVEMASTER — CONTROLE LOGÍSTICO
   Identidade: industrial, direta, rodoviária.
   Preto profundo + laranja de sinalização.

   Fundo: hoje é um glow desfocado gerado em CSS
   (sem depender de foto). Se vocês quiserem usar uma
   foto real da frota/pátio, é só:
   1) subir o arquivo como assets/hero-bg.png
   2) no seletor "body::before", trocar o valor de
      --hero-image (linha ~30) de "none" para
      url('assets/hero-bg.png')
   O blur e o escurecimento já estão prontos pra
   qualquer imagem que vocês colocarem ali.
   ============================================ */

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* ============================================================
       TOKENS SEMÂNTICOS — base do sistema de temas (dark + light)
       Os componentes usam estes tokens. Para trocar de tema, só
       redefinir os valores num seletor pai (ex: [data-tema="claro"]).
       Os aliases antigos ficam preservados abaixo pra não quebrar
       nada que já existe.
       ============================================================ */

    /* Superfícies (fundo -> elevado) */
    --surface-0: #0a0a0c;       /* fundo da página */
    --surface-1: #14141a;       /* card padrão */
    --surface-2: #1c1c22;       /* card elevado / hover */
    --surface-3: #26262e;       /* elemento no topo (dropdown, popover) */

    /* Bordas */
    --border-soft: #23232a;
    --border: #2e2e36;
    --border-strong: #3a3a44;

    /* Texto */
    --text-primary: #f0f0f2;
    --text-secondary: #a5a5ac;
    --text-tertiary: #6a6a72;
    --text-inverse: #0a0a0c;    /* pro botão laranja */

    /* Acento (a identidade Movemaster continua) */
    --accent: #ff6a00;
    --accent-hover: #ff8a33;
    --accent-dim: #b34c00;
    --accent-soft: rgba(255, 106, 0, 0.12);
    --accent-glow: rgba(255, 106, 0, 0.28);

    /* Estado — semântica compartilhada por selos, badges, alertas */
    --success: #4ade80;
    --success-soft: rgba(74, 222, 128, 0.14);
    --warning: #fbbf24;
    --warning-soft: rgba(251, 191, 36, 0.14);
    --danger: #ef4444;
    --danger-soft: rgba(239, 68, 68, 0.14);
    --info: #60a5fa;
    --info-soft: rgba(96, 165, 250, 0.14);

    /* Sombras — dashboard moderno usa profundidade real */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
    --shadow-accent: 0 4px 20px var(--accent-glow);

    /* Raios */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-full: 999px;

    /* ============================================================
       ALIASES antigos (nunca remover — 6000 linhas de CSS usam)
       Todos apontam para os tokens novos.
       ============================================================ */
    --black-void: var(--surface-0);
    --black-base: var(--surface-0);
    --black-panel: var(--surface-1);
    --black-elevated: var(--surface-2);
    --black-hover: var(--surface-3);

    --orange: var(--accent);
    --orange-bright: var(--accent-hover);
    --orange-dim: var(--accent-dim);
    --orange-glow: var(--accent-glow);
    --orange-glow-soft: var(--accent-soft);

    --white: var(--text-primary);
    --text-dark: var(--text-primary);
    --text-light: var(--text-secondary);
    --text-muted: var(--text-tertiary);

    --success-color: var(--success);
    --danger-color: var(--danger);
    --warning-color: var(--warning);
    --secondary-color: var(--accent);
    --primary-color: var(--surface-0);

    --border-color: var(--border);
    --light-bg: var(--surface-1);
    --bg-card: var(--surface-1);
    --bg-panel: var(--surface-1);
    --bg-dark: var(--surface-0);

    --shadow: var(--shadow-sm);
    --shadow-orange: var(--shadow-accent);

    --hero-image: url('movemaster2.png');
}

/* ============================================================
   MODO CLARO (aplicado quando <html data-tema="claro">)
   Trocamos só os tokens; todo o CSS abaixo continua igual.
   ============================================================ */
[data-tema="claro"] {
    --surface-0: #eceef1;       /* fundo geral: cinza suave (não branco) */
    --surface-1: #f7f8fa;       /* cards: quase branco, levíssimo cinza */
    --surface-2: #e9ebef;       /* elevado/hover: cinza um pouco mais forte */
    --surface-3: #dfe2e7;       /* topo (dropdown): cinza aparente */

    --border-soft: #e2e4e9;
    --border: #d3d6dc;
    --border-strong: #bcc0c8;

    --text-primary: #1a1c20;
    --text-secondary: #4d5058;
    --text-tertiary: #767a83;
    --text-inverse: #ffffff;

    --accent: #f56000;
    --accent-hover: #d94e00;
    --accent-dim: #ff8a33;
    --accent-soft: rgba(245, 96, 0, 0.10);
    --accent-glow: rgba(245, 96, 0, 0.22);

    --success: #15a34a;
    --success-soft: rgba(21, 163, 74, 0.12);
    --warning: #d97706;
    --warning-soft: rgba(217, 119, 6, 0.12);
    --danger: #dc2626;
    --danger-soft: rgba(220, 38, 38, 0.12);
    --info: #2563eb;
    --info-soft: rgba(37, 99, 235, 0.12);

    --shadow-xs: 0 1px 2px rgba(15, 15, 20, 0.05);
    --shadow-sm: 0 2px 8px rgba(15, 15, 20, 0.07);
    --shadow-md: 0 4px 16px rgba(15, 15, 20, 0.09);
    --shadow-lg: 0 8px 32px rgba(15, 15, 20, 0.11);
}

/* ============================================
   FUNDO — glow desfocado (placeholder para foto)
   ============================================ */

html {
    scroll-behavior: smooth;
    background-color: var(--black-void);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: transparent;
    color: var(--text-dark);
    line-height: 1.6;
    position: relative;
    min-height: 100vh;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
    filter: blur(14px) brightness(0.28) saturate(1.2);
    transform: scale(1.1);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 900px 500px at 15% -10%, var(--orange-glow-soft), transparent 60%),
        radial-gradient(ellipse 700px 500px at 110% 10%, rgba(255, 106, 0, 0.08), transparent 55%),
        repeating-linear-gradient(
            115deg,
            transparent 0px,
            transparent 68px,
            rgba(255, 255, 255, 0.012) 68px,
            rgba(255, 255, 255, 0.012) 70px
        ),
        linear-gradient(180deg, var(--black-void) 0%, var(--black-base) 40%, var(--black-void) 100%);
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ============================================
   HEADER E NAVEGAÇÃO
   ============================================ */

.header {
    background: rgba(8, 8, 10, 0.72);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid rgba(255, 106, 0, 0.35);
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(255, 106, 0, 0.12);
    padding: 1.2rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.logo {
    font-family: 'Oswald', sans-serif;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}

.logo-img {
    height: 48px;
    width: auto;
    /* Remove o fundo branco da PNG via mix-blend-mode */
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 10px rgba(255, 106, 0, 0.5));
    flex-shrink: 0;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.logo-brand {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--white);
    text-transform: uppercase;
}

.logo-brand span {
    color: var(--orange);
}

.logo-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-top: 2px;
}

.nav-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.nav-btn {
    background-color: transparent;
    color: var(--text-light);
    border: 1px solid var(--border-color);
    padding: 0.65rem 1.3rem;
    border-radius: 2px;
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.25s ease;
}

.nav-btn:hover {
    color: var(--white);
    border-color: var(--orange-dim);
    background-color: rgba(255, 106, 0, 0.06);
}

.nav-btn.active {
    background-color: var(--orange);
    color: var(--black-void);
    border-color: var(--orange);
    box-shadow: var(--shadow-orange);
}

/* ============================================
   CONTEÚDO PRINCIPAL
   ============================================ */

.main-content {
    flex: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: mmTelaSurge 0.28s ease-out;
}

@keyframes mmTelaSurge {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* respeita quem prefere menos animação (acessibilidade) */
@media (prefers-reduced-motion: reduce) {
    .tab-content.active { animation: none; }
}

/* mantém o keyframe antigo por compatibilidade com quem ainda usa */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   CARDS
   ============================================ */

.card {
    background: rgba(23, 23, 27, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    margin-bottom: 2rem;
}

.card h2 {
    font-family: 'Oswald', sans-serif;
    color: var(--white);
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--orange);
    padding-bottom: 0.6rem;
    display: inline-block;
}

/* ============================================
   PAINEL DE OCUPAÇÃO
   ============================================ */

.painel-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.painel-card {
    background: rgba(30, 30, 35, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--orange);
    border-radius: 6px;
    padding: 1.5rem;
    box-shadow: var(--shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.painel-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), var(--shadow-orange);
}

.painel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.painel-header h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--white);
}

.painel-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.painel-body p {
    font-size: 0.95rem;
    color: var(--text-light);
}

.painel-body strong {
    color: var(--white);
}

/* ============================================
   BADGES
   ============================================ */

.badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 2px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.badge-success {
    background-color: rgba(46, 204, 113, 0.15);
    color: var(--success-color);
    border: 1px solid rgba(46, 204, 113, 0.3);
}

.badge-warning {
    background-color: rgba(255, 176, 32, 0.15);
    color: var(--warning-color);
    border: 1px solid rgba(255, 176, 32, 0.3);
}

.badge-danger {
    background-color: rgba(255, 77, 77, 0.15);
    color: var(--danger-color);
    border: 1px solid rgba(255, 77, 77, 0.3);
}

.badge-pending {
    background-color: var(--orange-glow-soft);
    color: var(--orange-bright);
    border: 1px solid rgba(255, 106, 0, 0.3);
}

/* ============================================
   FORMULÁRIOS
   ============================================ */

.form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-row.full-width {
    grid-template-columns: 1fr;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
    color: var(--text-light);
    font-size: 0.85rem;
    text-transform: uppercase;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.75rem;
    background-color: var(--black-base);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-dark);
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.25s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--orange-glow-soft);
    background-color: var(--black-elevated);
}

.form-group input::placeholder {
    color: var(--text-muted);
}

.form-group select option {
    background-color: var(--black-panel);
    color: var(--text-dark);
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

/* ============================================
   BOTÕES
   ============================================ */

.btn {
    padding: 0.75rem 1.6rem;
    border: none;
    border-radius: 4px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.btn-primary {
    background-color: var(--orange);
    color: var(--black-void);
}

.btn-primary:hover {
    background-color: var(--orange-bright);
    transform: translateY(-2px);
    box-shadow: var(--shadow-orange);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-light);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    color: var(--white);
    border-color: var(--text-light);
    transform: translateY(-2px);
}

.btn-success {
    background-color: var(--success-color);
    color: var(--black-void);
}

.btn-success:hover {
    background-color: #3ee184;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-danger {
    background-color: var(--danger-color);
    color: var(--white);
}

.btn-danger:hover {
    background-color: #ff6b6b;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* ============================================
   TABELAS
   ============================================ */

.table-container {
    overflow-x: auto;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}

.table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--black-panel);
}

.table thead {
    background-color: var(--black-void);
}

.table th {
    padding: 1rem;
    text-align: left;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--orange-bright);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 2px solid var(--orange-dim);
}

.table td {
    padding: 0.85rem 1rem;
    color: var(--text-dark);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.92rem;
}

.table tbody tr:hover {
    background-color: rgba(255, 106, 0, 0.05);
}

.table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.015);
}

.text-center {
    text-align: center;
    color: var(--text-muted);
}

/* ============================================
   RESUMO DE FATURAMENTO
   ============================================ */

.resumo-faturamento {
    background: var(--black-elevated);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1.5rem;
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.resumo-item {
    background-color: var(--black-panel);
    border: 1px solid var(--border-color);
    padding: 1rem 1.25rem;
    border-radius: 4px;
    box-shadow: var(--shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-light);
}

.resumo-item strong {
    color: var(--white);
    font-family: 'Oswald', sans-serif;
}

.resumo-item.destaque {
    background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dim) 100%);
    border-color: var(--orange);
    color: var(--black-void);
}

.resumo-item.destaque strong {
    color: var(--black-void);
}

/* ============================================
   FILTROS E SEÇÕES
   ============================================ */

.filter-section {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.select-filtro {
    padding: 0.75rem;
    background-color: var(--black-base);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-dark);
    font-size: 0.95rem;
    font-family: inherit;
    min-width: 200px;
}

/* ============================================
   MODAIS
   ============================================ */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: modalBackdropIn 0.25s ease-out;
}

@keyframes modalBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: var(--black-panel);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--orange);
    padding: 2rem;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,106,0,0.06), 0 0 40px rgba(255,106,0,0.06);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalPop {
    from {
        transform: translateY(24px) scale(0.96);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.close {
    color: var(--text-light);
    float: right;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin: -0.5rem -0.5rem 0 0;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.close:hover {
    color: var(--orange);
    background: rgba(255, 106, 0, 0.12);
    transform: rotate(90deg);
}

.modal-content h2 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 1.5rem;
    color: var(--white);
    border-bottom: none;
    padding-bottom: 0;
}

/* ============================================
   MENSAGENS
   ============================================ */

.message {
    padding: 1rem;
    border-radius: 4px;
    margin-top: 1rem;
    display: none;
    animation: slideIn 0.3s ease-out;
    font-size: 0.9rem;
}

.message.show {
    display: block;
}

.message.success {
    background-color: rgba(46, 204, 113, 0.1);
    border-left: 3px solid var(--success-color);
    color: var(--success-color);
}

.message.error {
    background-color: rgba(255, 77, 77, 0.1);
    border-left: 3px solid var(--danger-color);
    color: var(--danger-color);
}

.message.warning {
    background-color: rgba(255, 176, 32, 0.1);
    border-left: 3px solid var(--warning-color);
    color: var(--warning-color);
}

.message.info {
    background-color: var(--orange-glow-soft);
    border-left: 3px solid var(--orange);
    color: var(--orange-bright);
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
    background-color: var(--black-void);
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    text-align: center;
    padding: 1.5rem;
    margin-top: auto;
}

.footer p {
    font-size: 0.8rem;
    letter-spacing: 0.03em;
}

.footer strong {
    color: var(--orange);
}

/* ============================================
   RESPONSIVIDADE
   ============================================ */

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .nav-tabs {
        gap: 0.4rem;
    }

    .nav-btn {
        padding: 0.55rem 1rem;
        font-size: 0.78rem;
    }

    .card {
        padding: 1.5rem;
    }

    .table {
        font-size: 0.85rem;
    }

    .table th,
    .table td {
        padding: 0.5rem;
    }

    .main-content {
        padding: 1.5rem 1rem;
    }

    .modal-content {
        width: 95%;
        padding: 1.5rem;
    }

    .filter-section {
        flex-direction: column;
        align-items: stretch;
    }

    .select-filtro {
        width: 100%;
        min-width: unset;
    }

    .form-actions {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .painel-container {
        grid-template-columns: 1fr;
    }

    .resumo-faturamento {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .logo-brand {
        font-size: 1.3rem;
    }

    .header-content {
        padding: 0 0.75rem;
    }

    .nav-tabs {
        flex-direction: column;
    }

    .nav-btn {
        width: 100%;
        text-align: center;
    }

    .card h2 {
        font-size: 1.05rem;
    }

    .table {
        font-size: 0.75rem;
    }

    .table th,
    .table td {
        padding: 0.4rem;
    }
}
/* ============================================
   TELA DE LOGIN
   ============================================ */

.login-overlay {
    position: fixed;
    inset: 0;
    background-color: #050507;
    background-image:
        linear-gradient(rgba(5,5,7,0.62), rgba(5,5,7,0.70)),
        var(--hero-image, none);
    background-size: cover, cover;
    background-position: center, center;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
}

.login-card {
    position: relative;
    background: linear-gradient(160deg, rgba(26, 26, 31, 0.98), rgba(18, 18, 22, 0.98));
    border: 1px solid rgba(255, 106, 0, 0.3);
    border-radius: 18px;
    padding: 2.8rem 2.5rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,106,0,0.08), 0 0 60px rgba(255,106,0,0.08);
    animation: loginCardIn 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes loginCardIn {
    from { transform: translateY(30px) scale(0.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.login-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.login-logo-img {
    height: 54px;
    width: auto;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 12px rgba(255, 106, 0, 0.5));
    animation: logoGlow 3s ease-in-out infinite;
}

@keyframes logoGlow {
    0%, 100% { filter: drop-shadow(0 0 12px rgba(255, 106, 0, 0.45)); }
    50% { filter: drop-shadow(0 0 20px rgba(255, 106, 0, 0.75)); }
}

.login-logo-text {
    display: flex;
    flex-direction: column;
}

.login-title {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-bottom: 1.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.login-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.login-group label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-muted);
}

.login-group input {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    color: var(--text-dark);
    font-size: 0.95rem;
    transition: border-color 0.2s, background 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.login-group input:focus {
    outline: none;
    border-color: var(--orange);
    background: rgba(255, 106, 0, 0.05);
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.12);
}

.login-btn {
    position: relative;
    margin-top: 0.5rem;
    padding: 0.9rem;
    font-size: 0.95rem;
    border-radius: 8px;
    width: 100%;
    letter-spacing: 0.05em;
    overflow: hidden;
    transition: transform 0.12s ease, box-shadow 0.2s ease;
}

.login-btn:hover {
    box-shadow: 0 6px 20px rgba(255, 106, 0, 0.35);
}

.login-btn:active { transform: scale(0.98); }

/* brilho que atravessa o botão no hover */
.login-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 0.5s ease;
}

.login-btn:hover::after { left: 130%; }

.login-erro {
    color: #ff5555;
    font-size: 0.83rem;
    text-align: center;
    min-height: 1rem;
}

/* Header: área direita com usuário e logout */
.header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-left: auto;
    flex-shrink: 0;
}

.usuario-logado {
    font-size: 0.78rem;
    color: var(--text-muted);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-logout {
    background: transparent;
    border: 1px solid rgba(255, 106, 0, 0.35);
    color: var(--orange);
    padding: 0.38rem 0.9rem;
    border-radius: 6px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: inherit;
}

.btn-logout:hover {
    background: var(--orange);
    color: #000;
    border-color: var(--orange);
}
/* ============================================
   GESTÃO LOGÍSTICA — DRAG AND DROP
   ============================================ */

.logistica-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 1.5rem;
    min-height: 600px;
}

.logistica-col {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.logistica-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    background: rgba(255,106,0,0.08);
    border: 1px solid rgba(255,106,0,0.2);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.logistica-col-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.btn-sm {
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
}

.text-sm { font-size: 0.78rem; }

/* Lista de pedidos arrastáveis */
.pedidos-drag-list {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 0 0 8px 8px;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 400px;
    overflow-y: auto;
    background: rgba(15,15,18,0.6);
}

.pedido-drag-card {
    background: rgba(30,30,36,0.9);
    border: 1px solid rgba(255,255,255,0.09);
    border-left: 3px solid var(--orange);
    border-radius: 7px;
    padding: 0.8rem 1rem;
    cursor: grab;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    user-select: none;
}

.pedido-drag-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    border-color: var(--orange);
}

.pedido-drag-card.dragging {
    opacity: 0.5;
    cursor: grabbing;
    transform: rotate(2deg) scale(1.02);
}

.drag-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
}

.drag-card-id {
    font-size: 0.72rem;
    color: var(--orange);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.drag-card-valor {
    font-size: 0.8rem;
    font-weight: 600;
    color: #4ade80;
}

.drag-card-cliente {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.drag-card-rota {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}

.drag-card-detalhe {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Lista de veículos (drop targets) */
.veiculos-drop-list {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 0 0 8px 8px;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-height: 400px;
    overflow-y: auto;
    background: rgba(15,15,18,0.6);
}

.veiculo-drop-card {
    background: rgba(25,25,30,0.95);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 1rem;
    transition: border-color 0.2s;
}

.veiculo-drop-card:hover {
    border-color: rgba(255,106,0,0.3);
}

.veiculo-drop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.veiculo-drop-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.veiculo-placa {
    font-size: 1rem;
    font-weight: 700;
    color: var(--orange);
    letter-spacing: 0.05em;
}

.veiculo-tipo {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: rgba(255,255,255,0.06);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.vagas-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
}

.vagas-livre  { background: rgba(74,222,128,0.15); color: #4ade80; }
.vagas-quase  { background: rgba(251,191,36,0.15); color: #fbbf24; }
.vagas-cheio  { background: rgba(239,68,68,0.15);  color: #ef4444; }

.veiculo-motorista-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

.motorista-nome { color: var(--text-dark); }

.btn-vincular-motorista {
    background: transparent;
    border: 1px solid rgba(255,106,0,0.3);
    color: var(--orange);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.btn-vincular-motorista:hover {
    background: var(--orange);
    color: #000;
}

.veiculo-pedidos-alocados {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.6rem;
}

.pedido-alocado-mini {
    display: flex;
    justify-content: space-between;
    font-size: 0.73rem;
    background: rgba(255,106,0,0.07);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    color: var(--text-muted);
}

.drop-zone {
    border: 2px dashed rgba(255,106,0,0.3);
    border-radius: 7px;
    padding: 0.7rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    transition: all 0.2s;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drop-zone:not(.drop-zone-cheio):hover {
    border-color: var(--orange);
    background: rgba(255,106,0,0.05);
}

.drop-zone.drag-over {
    border-color: var(--orange);
    background: rgba(255,106,0,0.12);
    color: var(--orange);
    transform: scale(1.01);
}

.drop-zone-cheio {
    border-color: rgba(239,68,68,0.3);
    color: #ef4444;
    cursor: not-allowed;
}

/* ============================================
   RESUMO DA ALOCAÇÃO NO MODAL
   ============================================ */

.alocacao-resumo {
    margin-bottom: 1.5rem;
}

.alocacao-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.alocacao-info-item {
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
}

.alocacao-info-item label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}

.alocacao-info-item span {
    font-size: 0.88rem;
    color: var(--text-dark);
    font-weight: 500;
}

/* ============================================
   PAINEL KANBAN
   ============================================ */

.painel-card-full {
    padding: 1.5rem;
}

.painel-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.painel-header-bar h2 { margin: 0; }

.kanban-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    min-height: 500px;
}

.kanban-col {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.kanban-col-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border-radius: 8px 8px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.kanban-col-header.pendente  { background: rgba(251,191,36,0.12); color: #fbbf24; border-bottom: 2px solid #fbbf24; }
.kanban-col-header.em-rota   { background: rgba(96,165,250,0.12); color: #60a5fa; border-bottom: 2px solid #60a5fa; }
.kanban-col-header.entregue  { background: rgba(74,222,128,0.12); color: #4ade80; border-bottom: 2px solid #4ade80; }

.kanban-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.kanban-count {
    margin-left: auto;
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
}

.kanban-col-body {
    background: rgba(12,12,16,0.6);
    border: 1px solid rgba(255,255,255,0.06);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 0.7rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
    min-height: 460px;
}

.kanban-card {
    background: rgba(28,28,34,0.95);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 0.8rem;
    transition: transform 0.15s, box-shadow 0.15s;
}

.kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.kanban-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.kanban-card-id {
    font-size: 0.7rem;
    color: var(--orange);
    font-weight: 700;
}

.kanban-card-cliente {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.4rem;
}

.kanban-card-rota {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}

.kanban-arrow { color: var(--orange); }

.kanban-card-info {
    font-size: 0.73rem;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}

.kanban-card-valor {
    font-size: 0.82rem;
    font-weight: 600;
    color: #4ade80;
    margin-top: 0.4rem;
}

/* ============================================
   NOTIFICAÇÕES DE COLETA
   ============================================ */

#notificacoesColeta {
    position: fixed;
    top: 80px;
    right: 1.5rem;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 380px;
}

.notificacao-coleta {
    background: rgba(20, 20, 25, 0.97);
    border: 1px solid rgba(251,191,36,0.5);
    border-left: 4px solid #fbbf24;
    border-radius: 10px;
    padding: 1rem 1.2rem;
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
}

.notif-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.notif-corpo {
    flex: 1;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.notif-corpo strong {
    display: block;
    color: #fbbf24;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}

.notif-corpo p { margin: 0.15rem 0; }

.notif-fechar {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

.notif-fechar:hover { color: var(--text-dark); }

/* Responsivo */
@media (max-width: 900px) {
    .logistica-layout {
        grid-template-columns: 1fr;
    }
    .kanban-board {
        grid-template-columns: 1fr;
    }
}
/* ============================================
   SISTEMA DE PERFIS
   ============================================ */

/* Badges de perfil */
.badge-perfil {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.badge-admin      { background: rgba(139,92,246,0.2); color: #a78bfa; border: 1px solid rgba(139,92,246,0.3); }
.badge-comercial  { background: rgba(249,115,22,0.2); color: #fb923c; border: 1px solid rgba(249,115,22,0.3); }
.badge-logistica  { background: rgba(96,165,250,0.2); color: #60a5fa; border: 1px solid rgba(96,165,250,0.3); }
.badge-motorista  { background: rgba(74,222,128,0.2); color: #4ade80; border: 1px solid rgba(74,222,128,0.3); }
.badge-financeiro { background: rgba(251,191,36,0.2); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.badge-fiscal     { background: rgba(244,114,182,0.2); color: #f472b6; border: 1px solid rgba(244,114,182,0.3); }

/* Botão voltar admin */
.btn-voltar-admin {
    background: rgba(139,92,246,0.15);
    border: 1px solid rgba(139,92,246,0.3);
    color: #a78bfa;
    padding: 0.35rem 0.8rem;
    border-radius: 6px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.btn-voltar-admin:hover { background: rgba(139,92,246,0.3); }

/* Tela sem permissão */
.sem-permissao-card {
    text-align: center;
    max-width: 360px;
}
.sem-permissao-icon  { font-size: 3rem; margin-bottom: 1rem; display: block; }
.sem-permissao-titulo { font-size: 1.3rem; margin-bottom: 0.5rem; color: var(--text-dark); }
.sem-permissao-texto  { color: var(--text-muted); margin-bottom: 0.5rem; font-size: 0.9rem; }
.sem-permissao-perfil { color: #ef4444; font-size: 0.82rem; margin-bottom: 1.5rem; }

/* Tela admin */
#telaAdmin { min-height: 100vh; }

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.card-header-row h2 { margin: 0; }

/* Tabela de usuários */
/* ---- Tela Gerenciar Usuários: refinamento visual ---- */

/* Alinhamento vertical consistente em todas as células */
#gerenciarUsuarios .table th,
#gerenciarUsuarios .table td { vertical-align: middle; }

/* Ritmo de colunas: nome/e-mail elásticos, resto compacto e sem quebra */
#gerenciarUsuarios .table td.col-perfil,
#gerenciarUsuarios .table td.col-status,
#gerenciarUsuarios .table td.col-criado,
#gerenciarUsuarios .table td.col-acoes { white-space: nowrap; }

#gerenciarUsuarios .table td.col-nome { font-weight: 600; }

#gerenciarUsuarios .table td.col-email {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}

#gerenciarUsuarios .table td.col-criado { color: var(--text-muted); font-size: 0.85rem; }

/* Chip de status (bonito, com bolinha) */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.3rem 0.72rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1;
    border: 1px solid transparent;
}
.status-pill .status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-pill.ativo {
    background: rgba(74,222,128,0.12);
    color: #4ade80;
    border-color: rgba(74,222,128,0.35);
}
.status-pill.ativo .status-dot {
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74,222,128,0.16);
}
.status-pill.inativo {
    background: rgba(239,68,68,0.10);
    color: #f87171;
    border-color: rgba(239,68,68,0.30);
}
.status-pill.inativo .status-dot { background: #f87171; }

/* Ações: wrapper flex DENTRO da célula (a célula segue como table-cell,
   então o alinhamento vertical das linhas fica perfeito) */
.acoes-wrap {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: nowrap;
}
.acoes-wrap .btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    min-height: 30px;
    white-space: nowrap;
    line-height: 1;
}

.btn-danger {
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.3);
    color: #ef4444;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-size: 0.78rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}
.btn-danger:hover { background: rgba(239,68,68,0.3); }

/* Grid de acesso por perfil (admin) */
.perfis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.perfil-acesso-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.perfil-acesso-card:hover {
    background: rgba(249,115,22,0.08);
    border-color: rgba(249,115,22,0.4);
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.perfil-acesso-card .perfil-icon { transition: transform 0.2s ease; }
.perfil-acesso-card:hover .perfil-icon { transform: scale(1.15); }
.perfil-icon  { font-size: 2rem; }
.perfil-nome  { font-size: 0.88rem; font-weight: 600; color: var(--text-dark); }

/* Área do motorista */
.motorista-acoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.motorista-acao-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.motorista-acao-card:hover {
    transform: translateY(-3px);
    border-color: rgba(249,115,22,0.4);
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.motorista-acao-card:active { transform: scale(0.98); }
.motorista-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.3));
    transition: transform 0.18s ease;
}
.motorista-acao-card:hover .motorista-icon { transform: scale(1.12); }
.motorista-acao-card h3 { margin: 0; font-size: 1rem; }
.motorista-acao-card p  { font-size: 0.82rem; color: var(--text-muted); margin: 0; }
/* ============================================
   FLUXO DE STATUS
   ============================================ */

/* Modal de status */
.modal-status-content {
    max-width: 560px;
}

.status-resumo-pedido {
    margin-bottom: 1.2rem;
}

.status-resumo-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding: 0.8rem 1rem;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    font-size: 0.85rem;
}

.status-badge-inline {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

/* Fluxo visual de etapas */
.status-flow {
    display: flex;
    align-items: center;
    margin: 1.2rem 0;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    gap: 0;
}

.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.flow-step span {
    font-size: 0.62rem;
    text-align: center;
    max-width: 72px;
    line-height: 1.2;
}

.flow-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid currentColor;
}

.flow-linha {
    flex: 1;
    min-width: 16px;
    height: 2px;
    background: rgba(255,255,255,0.1);
    margin-bottom: 1.2rem;
}

.flow-step.passado  { color: #4ade80; }
.flow-step.passado .flow-dot { background: #4ade80; border-color: #4ade80; }
.flow-step.atual    { color: #f97316; }
.flow-step.atual .flow-dot { background: #f97316; border-color: #f97316; box-shadow: 0 0 8px #f97316; }
.flow-step.futuro   { color: rgba(255,255,255,0.25); }
.flow-step.futuro .flow-dot { background: transparent; border-color: rgba(255,255,255,0.2); }

/* Botões de ação do status */
.status-acoes-btn {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
    align-items: center;
}

.btn-status {
    background: transparent;
    border: 1px solid;
    border-radius: 8px;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    font-weight: 500;
}

.btn-status:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.btn-status-selecionado {
    opacity: 1 !important;
    box-shadow: 0 0 0 2px currentColor;
}

.btn-confirmar-status {
    margin-left: auto;
}

/* Botões nos cards kanban e drag */
.kanban-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.kanban-card-acoes {
    display: flex;
    gap: 0.3rem;
}

.btn-kanban-status {
    background: rgba(249,115,22,0.12);
    border: 1px solid rgba(249,115,22,0.3);
    color: #f97316;
    padding: 0.18rem 0.5rem;
    border-radius: 4px;
    font-size: 0.68rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: all 0.15s;
}

.btn-kanban-status:hover {
    background: rgba(249,115,22,0.25);
}

.btn-kanban-hist {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-muted);
    padding: 0.18rem 0.5rem;
    border-radius: 4px;
    font-size: 0.68rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.btn-kanban-hist:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-dark);
}

.drag-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* Histórico de status */
.lista-historico {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-height: 480px;
    overflow-y: auto;
    padding-right: 0.3rem;
}

.historico-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 0.8rem 1rem;
}

.historico-linha {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
    font-weight: 600;
    font-size: 0.88rem;
}

.hist-seta {
    color: rgba(255,255,255,0.3);
    font-size: 1rem;
}

.historico-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.73rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.historico-obs {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: #fbbf24;
    background: rgba(251,191,36,0.06);
    border-radius: 4px;
    padding: 0.3rem 0.5rem;
}
/* ============================================
   PARTE 3: UPLOAD, MOTORISTA, FISCAL
   ============================================ */

/* Área de upload */
.upload-area {
    border: 2px dashed rgba(249,115,22,0.3);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(249,115,22,0.03);
}

.upload-area:hover {
    border-color: rgba(249,115,22,0.6);
    background: rgba(249,115,22,0.07);
}

.upload-area-com-arquivo {
    border-color: #4ade80;
    background: rgba(74,222,128,0.05);
}

.upload-icon { font-size: 2rem; display: block; margin-bottom: 0.5rem; }
.upload-area p { color: var(--text-muted); font-size: 0.85rem; margin: 0.3rem 0; }
.upload-nome { font-size: 0.8rem; color: #4ade80; font-weight: 600; display: block; margin-top: 0.3rem; }

/* Barra de progresso */
.progress-bar-wrap {
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    height: 28px;
    position: relative;
    overflow: hidden;
    margin: 0.8rem 0;
}

.progress-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, #f97316, #fbbf24);
    border-radius: 8px;
    transition: width 0.4s ease;
}

#progressBarTexto {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    color: white;
    font-weight: 600;
}

/* Botões de ocorrência, receita nos cards */
.btn-kanban-ocorr {
    background: rgba(251,191,36,0.12);
    border: 1px solid rgba(251,191,36,0.3);
    color: #fbbf24;
    padding: 0.18rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.btn-kanban-ocorr:hover { background: rgba(251,191,36,0.25); }

.btn-kanban-receita {
    background: rgba(74,222,128,0.12);
    border: 1px solid rgba(74,222,128,0.3);
    color: #4ade80;
    padding: 0.18rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.btn-kanban-receita:hover { background: rgba(74,222,128,0.25); }

/* Cards de pedidos do motorista */
.motorista-pedidos-lista {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.motorista-pedido-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008));
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 4px solid var(--mp-cor, #f97316);
    border-radius: 12px;
    padding: 0.95rem 1.05rem;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.motorista-pedido-card:active {
    transform: scale(0.99);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.mp-pulse {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 0.3rem;
    vertical-align: middle;
    animation: mpPulse 1.5s ease-in-out infinite;
}

@keyframes mpPulse {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    50% { box-shadow: 0 0 0 4px transparent; opacity: 0.5; }
}

.mpedido-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.mpedido-id {
    font-size: 0.78rem;
    font-weight: 700;
    color: #f97316;
}

.mpedido-status {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mpedido-cliente {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.3rem;
}

.mpedido-rota, .mpedido-veiculo, .mpedido-data {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}

.mpedido-acoes {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

/* Notificações do fiscal */
.fiscal-notif {
    background: rgba(251,191,36,0.08);
    border: 1px solid rgba(251,191,36,0.3);
    border-left: 4px solid #fbbf24;
    border-radius: 8px;
    padding: 0.7rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.fiscal-notif strong { color: #fbbf24; }
/* Área de botões no card drag — não deve iniciar drag */
.drag-card-acoes {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    user-select: none;
    -webkit-user-drag: none;
}

.drag-card-acoes button {
    -webkit-user-drag: none;
    user-select: none;
}
/* ============================================
   BUSCA DE CLIENTE NO PEDIDO
   ============================================ */

.cliente-busca-wrap {
    position: relative;
}

.cliente-busca-wrap input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

.lista-clientes-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1a1a20;
    border: 1px solid rgba(249,115,22,0.3);
    border-radius: 0 0 8px 8px;
    z-index: 1000;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.cliente-item {
    padding: 0.65rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.15s;
}

.cliente-item:hover { background: rgba(249,115,22,0.1); }
.cliente-item:last-child { border-bottom: none; }

.cliente-item-nome {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.cliente-item-doc {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

.cliente-item-vazio {
    padding: 0.8rem 1rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
}

.cliente-tipo-badge {
    font-size: 0.6rem;
    background: rgba(249,115,22,0.15);
    color: #f97316;
    border: 1px solid rgba(249,115,22,0.2);
    padding: 0.08rem 0.35rem;
    border-radius: 3px;
    text-transform: capitalize;
}

.cliente-cod {
    font-size: 0.65rem;
    background: rgba(96,165,250,0.12);
    color: #60a5fa;
    border: 1px solid rgba(96,165,250,0.2);
    padding: 0.08rem 0.35rem;
    border-radius: 3px;
}

.cliente-selecionado-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
    padding: 0.45rem 0.7rem;
    background: rgba(74,222,128,0.08);
    border: 1px solid rgba(74,222,128,0.2);
    border-radius: 6px;
    font-size: 0.78rem;
}

.cliente-sel-nome { color: #4ade80; font-weight: 600; }
.cliente-sel-tipo { color: #f97316; font-size: 0.7rem; background: rgba(249,115,22,0.1); padding: 0.08rem 0.35rem; border-radius: 3px; }
.cliente-sel-doc  { color: var(--text-muted); }
.cliente-sel-cod  { color: #60a5fa; font-size: 0.7rem; }

.cliente-sel-limpar {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    font-family: inherit;
}
.cliente-sel-limpar:hover { color: #ef4444; }

/* ============================================
   MÁSCARA R$ NO FRETE
   ============================================ */

.input-moeda-wrap {
    display: flex;
    align-items: center;
    background: var(--black-elevated, #1a1a20);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.input-moeda-wrap:focus-within {
    border-color: var(--orange);
}

.input-moeda-prefixo {
    padding: 0 0.75rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #4ade80;
    background: rgba(74,222,128,0.06);
    border-right: 1px solid rgba(255,255,255,0.08);
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    user-select: none;
}

.input-moeda-wrap input {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    flex: 1;
}

.input-moeda-wrap input:focus {
    outline: none;
    box-shadow: none;
}
/* ============================================
   DASHBOARD COMERCIAL
   ============================================ */

.comercial-dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dash-card {
    background: rgba(20,20,26,0.95);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: border-color 0.2s, transform 0.15s;
}

.dash-card:hover { transform: translateY(-2px); border-color: rgba(249,115,22,0.3); }

.dash-icon { font-size: 1.8rem; flex-shrink: 0; }

.dash-info { display: flex; flex-direction: column; gap: 0.2rem; }

.dash-valor {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1;
}

.dash-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ============================================
   FILTROS DA LISTAGEM
   ============================================ */

.filtro-select {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    color: var(--text-dark);
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
}

.filtro-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    color: var(--text-dark);
    font-size: 0.82rem;
    width: 160px;
}

.filtro-input:focus, .filtro-select:focus {
    outline: none;
    border-color: rgba(249,115,22,0.4);
}

/* ============================================
   CHECKLIST
   ============================================ */

.checklist-items {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.checklist-item:hover { background: rgba(255,255,255,0.06); }

.checklist-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #4ade80;
    flex-shrink: 0;
    cursor: pointer;
}

.checklist-item:has(input:checked) {
    background: rgba(74,222,128,0.07);
    border-color: rgba(74,222,128,0.2);
    color: var(--text-dark);
}

/* ============================================
   HISTÓRICO DO CLIENTE
   ============================================ */

.historico-cliente-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
}

.hc-stat {
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 0.8rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.hc-num {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-dark);
}

.hc-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-hist-cliente {
    background: rgba(96,165,250,0.1);
    border: 1px solid rgba(96,165,250,0.25);
    color: #60a5fa;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.btn-hist-cliente:hover { background: rgba(96,165,250,0.2); }

@media (max-width: 768px) {
    .comercial-dashboard { grid-template-columns: repeat(2, 1fr); }
    .historico-cliente-stats { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================
   CUSTOM SELECT
   ============================================ */

.custom-select-wrap {
    position: relative;
    min-width: 160px;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: var(--text-dark);
    font-size: 0.82rem;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s;
    white-space: nowrap;
    height: 34px;
}

.custom-select-trigger:hover { border-color: rgba(249,115,22,0.4); }
.custom-select-arrow { font-size: 0.65rem; color: var(--text-muted); flex-shrink: 0; }

.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    background: #16161e;
    border: 1px solid rgba(249,115,22,0.25);
    border-radius: 8px;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    overflow: hidden;
}

.custom-select-option {
    padding: 0.55rem 1rem;
    font-size: 0.82rem;
    color: #aaa;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    white-space: nowrap;
}

.custom-select-option:last-child { border-bottom: none; }
.custom-select-option:hover { background: rgba(249,115,22,0.12); color: #f97316; }
.custom-select-option.selecionado { background: rgba(249,115,22,0.08); color: #f97316; font-weight: 600; }

/* ============================================
   RESUMO DE ROTAS
   ============================================ */

.rotas-resumo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.btn-fechar-rotas {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.btn-fechar-rotas:hover { color: #ef4444; }

.rotas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.8rem;
    margin-bottom: 0.5rem;
}

.rota-card {
    background: rgba(18,18,24,0.95);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    cursor: pointer;
    transition: all 0.18s;
}

.rota-card:hover {
    border-color: rgba(249,115,22,0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.rota-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.6rem;
    border-left: 3px solid;
    padding-left: 0.7rem;
    margin-bottom: 0.6rem;
}

.rota-trajeto { display: flex; flex-direction: column; gap: 0.2rem; }
.rota-origem, .rota-destino { font-size: 0.8rem; font-weight: 600; color: var(--text-dark); }
.rota-seta { font-size: 0.65rem; color: var(--text-muted); margin-left: 1rem; }

.rota-total-badge {
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(249,115,22,0.12);
    color: #f97316;
    border: 1px solid rgba(249,115,22,0.2);
    padding: 0.18rem 0.5rem;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.rota-statuses { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }

.rota-status-badge {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
}

.rota-valor { font-size: 0.82rem; font-weight: 600; color: #4ade80; }
/* ============================================
   ABAS INTERNAS DA LOGÍSTICA
   ============================================ */

.logistica-tabs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding-bottom: 0.8rem;
    flex-wrap: wrap;
}

.log-tab-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
    padding: 0.45rem 1rem;
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    white-space: nowrap;
}

.log-tab-btn:hover { border-color: rgba(249,115,22,0.3); color: var(--text-dark); }
.log-tab-btn.active { background: rgba(249,115,22,0.12); border-color: rgba(249,115,22,0.4); color: #f97316; font-weight: 600; }

.log-tab-content { display: block; }

/* ============================================
   PAINEL DAS CEGONHAS
   ============================================ */

.painel-cegonhas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.2rem;
}

.cegonha-card {
    background: rgba(18,18,24,0.95);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.cegonha-card:hover { border-color: rgba(249,115,22,0.25); }

.cegonha-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1.1rem 0.5rem;
}

.cegonha-placa { font-size: 1rem; font-weight: 700; color: #f97316; letter-spacing: 0.05em; }
.cegonha-tipo { font-size: 0.7rem; color: var(--text-muted); background: rgba(255,255,255,0.06); padding: 0.12rem 0.4rem; border-radius: 4px; margin-left: 0.5rem; }
.cegonha-pct { font-size: 0.8rem; font-weight: 600; }

.cegonha-motorista {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1.1rem 0.6rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.cegonha-vagas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 0.8rem 1rem;
}

.cegonha-vaga {
    border-radius: 8px;
    padding: 0.6rem 0.7rem;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    transition: all 0.15s;
    position: relative;
}

.cegonha-vaga.ocupada { border: 1px solid; }
.cegonha-vaga.livre {
    border: 1px dashed rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.02);
    align-items: center;
    justify-content: center;
}

.vaga-id { font-size: 0.65rem; font-weight: 700; color: #f97316; }
.vaga-cliente { font-size: 0.78rem; font-weight: 600; color: var(--text-dark); }
.vaga-status { font-size: 0.62rem; font-weight: 600; }

.vaga-acoes {
    display: flex;
    gap: 0.2rem;
    margin-top: 0.3rem;
}

.btn-vaga-acao {
    background: rgba(255,255,255,0.06);
    border: none;
    border-radius: 4px;
    padding: 0.15rem 0.3rem;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-vaga-acao:hover { background: rgba(255,255,255,0.15); }

.cegonha-barra {
    height: 6px;
    background: rgba(255,255,255,0.06);
    margin: 0 1rem;
    border-radius: 3px;
    overflow: hidden;
}

.cegonha-barra-inner {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 8px currentColor;
}

.cegonha-footer {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 1.1rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ============================================
   MOVER PEDIDO
   ============================================ */

.mover-opcoes {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mover-opcao {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.mover-opcao:hover { background: rgba(249,115,22,0.07); border-color: rgba(249,115,22,0.2); }
.mover-opcao.selecionada { background: rgba(249,115,22,0.1); border-color: rgba(249,115,22,0.4); }

.mover-icon { font-size: 1.5rem; flex-shrink: 0; }
.mover-opcao strong { display: block; font-size: 0.88rem; color: var(--text-dark); margin-bottom: 0.1rem; }
.mover-opcao p { font-size: 0.75rem; color: var(--text-muted); margin: 0; }

/* ============================================
   GALERIA DE FOTOS
   ============================================ */

.galeria-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.galeria-fotos-modal {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.8rem;
    max-height: 60vh;
    overflow-y: auto;
}

.foto-card {
    background: rgba(18,18,24,0.95);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.15s;
}

.foto-card:hover { transform: translateY(-2px); }

.foto-card-img {
    position: relative;
    height: 140px;
    overflow: hidden;
    cursor: zoom-in;
    background: rgba(0,0,0,0.3);
}

.foto-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s;
}

.foto-card-img:hover img { transform: scale(1.05); }

.foto-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: white;
    opacity: 0;
    transition: opacity 0.15s;
}

.foto-card-img:hover .foto-overlay { opacity: 1; }

.foto-erro {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.foto-card-info {
    padding: 0.6rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.foto-pedido { font-size: 0.8rem; font-weight: 600; color: var(--text-dark); }
.foto-motorista { font-size: 0.72rem; color: var(--text-muted); }
.foto-data { font-size: 0.68rem; color: var(--text-muted); }
.foto-obs { font-size: 0.7rem; color: #fbbf24; }
/* Botão gerar PDF na cegonha */
.btn-gerar-pdf-cegonha {
    background: rgba(74,222,128,0.12);
    border: 1px solid rgba(74,222,128,0.3);
    color: #4ade80;
    padding: 0.3rem 0.7rem;
    border-radius: 5px;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: all 0.15s;
}

.btn-gerar-pdf-cegonha:hover { background: rgba(74,222,128,0.22); }
.btn-gerar-pdf-cegonha:disabled { opacity: 0.35; cursor: not-allowed; }
/* ============================================
   MÚLTIPLOS VEÍCULOS NO MESMO PEDIDO
   ============================================ */

.btn-add-veiculo {
    background: transparent;
    border: 1px dashed var(--primary, #3b82f6);
    color: var(--primary, #3b82f6);
    padding: 0.55rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.15s ease;
    width: 100%;
}

.btn-add-veiculo:hover {
    background: rgba(59, 130, 246, 0.08);
}

.veiculo-extra-row {
    position: relative;
    align-items: flex-end;
    background: rgba(59, 130, 246, 0.04);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.btn-remover-veiculo {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-bottom: 0.15rem;
    transition: background 0.15s ease;
}

.btn-remover-veiculo:hover {
    background: rgba(239, 68, 68, 0.1);
}

.badge-grupo {
    display: inline-block;
    background: rgba(139, 92, 246, 0.14);
    color: #8b5cf6;
    padding: 0.05rem 0.45rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    margin-left: 0.3rem;
    vertical-align: middle;
}

/* ============================================
   TRANSBORDO EM PÁTIO
   ============================================ */

.badge-transbordo {
    display: inline-block;
    padding: 0.08rem 0.5rem;
    border-radius: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
}

/* Carro parado no pátio AGORA — chama atenção */
.transbordo-atual {
    background: rgba(251, 146, 60, 0.16);
    color: #fb923c;
    border: 1px solid rgba(251, 146, 60, 0.5);
    animation: pulsar-transbordo 1.6s ease-in-out infinite;
}

@keyframes pulsar-transbordo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.35); }
    50%      { box-shadow: 0 0 0 5px rgba(251, 146, 60, 0); }
}

/* Transbordo já cumprido — etapa vencida */
.transbordo-feito {
    background: rgba(74, 222, 128, 0.10);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .transbordo-atual { animation: none; }
}

/* ============================================
   ÁREA DO MOTORISTA — MOBILE FIRST
   Motorista usa celular na estrada: botões grandes,
   cards em coluna única, barra de resumo fixa no topo
   ============================================ */

.motorista-resumo-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg-card, #1a1d24);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.8rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.motorista-resumo-nums {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mres-item {
    font-size: 0.78rem;
    color: var(--text-muted, #9ca3af);
}

.mres-item strong {
    font-size: 1.35rem;
    display: block;
    text-align: center;
    font-weight: 800;
}

.mres-item:nth-child(1) strong { color: #f5f4f1; }
.mres-item:nth-child(2) strong { color: #a78bfa; }
.mres-item:nth-child(3) strong { color: #34d399; }

.btn-pdf-carga {
    width: 100%;
    min-height: 48px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.16), rgba(96, 165, 250, 0.08));
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.45);
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-pdf-carga:hover {
    box-shadow: 0 6px 18px rgba(96, 165, 250, 0.25);
}

.btn-pdf-carga:active {
    transform: scale(0.97);
    background: rgba(96, 165, 250, 0.28);
}

/* Botões de ação dos cards: alvo de toque grande (mín. 48px) */
.mpedido-acoes {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.7rem;
}

.btn-motorista-acao {
    flex: 1 1 30%;
    min-height: 48px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: filter 0.15s ease, transform 0.1s ease;
}

.btn-motorista-acao:active { transform: scale(0.94); }

.btn-motorista-acao:active { filter: brightness(1.25); }

.btn-macao-foto {
    background: rgba(167, 139, 250, 0.15);
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.45);
}

.btn-macao-cte {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.4);
}

.btn-macao-ocorrencia {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.4);
}

/* Ajustes gerais no celular */
@media (max-width: 640px) {
    #motorista .card {
        padding: 0.9rem;
    }

    .motorista-acoes {
        grid-template-columns: 1fr !important;
        display: grid;
        gap: 0.7rem;
    }

    .motorista-pedido-card {
        padding: 0.9rem;
    }

    .mpedido-rota {
        font-size: 0.85rem;
        line-height: 1.6;
    }

    .mpedido-veiculo {
        font-size: 0.85rem;
    }

    .btn-motorista-acao {
        flex: 1 1 100%;
    }

    /* Modal de upload ocupa a tela toda no celular */
    #modalUpload .modal-content {
        width: 96vw;
        max-width: 96vw;
        margin: 2vh auto;
        max-height: 92vh;
        overflow-y: auto;
    }

    .upload-area {
        min-height: 110px;
        padding: 1.2rem 0.8rem;
    }
}

/* ============================================
   PAINEL: CARROS NOS PÁTIOS
   ============================================ */

.patios-resumo {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.patios-resumo-item {
    background: var(--bg-card, #1a1d24);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.7rem 1.1rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.patios-resumo-item strong {
    font-size: 1.4rem;
    color: #fb923c;
}

.patios-resumo-item span {
    font-size: 0.78rem;
    color: var(--text-muted, #9ca3af);
}

.patios-resumo-alerta strong { color: #ef4444; }

.painel-patios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 0.9rem;
}

.patio-card {
    background: var(--bg-card, #1a1d24);
    border: 1px solid rgba(251, 146, 60, 0.25);
    border-radius: 12px;
    padding: 0.9rem;
}

.patio-card-vazio {
    border-color: rgba(255, 255, 255, 0.07);
    opacity: 0.9;
}

.patio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.7rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.patio-nome {
    font-weight: 700;
    font-size: 0.92rem;
}

.patio-qtd {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fb923c;
    background: rgba(251, 146, 60, 0.12);
    border: 1px solid rgba(251, 146, 60, 0.35);
    padding: 0.12rem 0.55rem;
    border-radius: 20px;
}

.patio-card-vazio .patio-qtd {
    color: var(--text-muted, #9ca3af);
    background: transparent;
    border-color: rgba(255, 255, 255, 0.12);
}

.patio-vazio {
    text-align: center;
    color: var(--text-muted, #9ca3af);
    font-size: 0.8rem;
    padding: 0.8rem 0;
}

.carro-patio-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9px;
    padding: 0.65rem;
    margin-bottom: 0.55rem;
}

.carro-patio-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
}

.carro-patio-id {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted, #9ca3af);
}

.carro-patio-tempo {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    padding: 0.1rem 0.5rem;
    border-radius: 5px;
}

.tempo-alerta {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.45);
    animation: pulsar-transbordo 1.6s ease-in-out infinite;
}

.carro-patio-cliente { font-size: 0.85rem; font-weight: 600; }
.carro-patio-veiculo, .carro-patio-destino {
    font-size: 0.78rem;
    color: var(--text-muted, #9ca3af);
    margin-top: 0.15rem;
}

.carro-patio-acoes {
    display: flex;
    gap: 0.45rem;
    margin-top: 0.55rem;
}

.btn-patio-sair {
    flex: 1;
    min-height: 36px;
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.4);
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.btn-patio-sair:hover { background: rgba(74, 222, 128, 0.2); }

.btn-patio-hist {
    min-height: 36px;
    background: transparent;
    color: var(--text-muted, #9ca3af);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 7px;
    font-size: 0.78rem;
    padding: 0 0.7rem;
    cursor: pointer;
}

/* Extrato de entradas e saídas */
.patios-movs {
    margin-top: 1.2rem;
    background: var(--bg-card, #1a1d24);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.9rem;
}

.patios-movs h3 {
    font-size: 0.92rem;
    margin-bottom: 0.7rem;
}

.patio-mov {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.45rem 0.55rem;
    border-radius: 7px;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    flex-wrap: wrap;
}

.mov-entrada { background: rgba(251, 146, 60, 0.06); }
.mov-saida   { background: rgba(74, 222, 128, 0.06); }

.mov-tipo {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.1rem 0.5rem;
    border-radius: 5px;
    white-space: nowrap;
}

.mov-entrada .mov-tipo { color: #fb923c; background: rgba(251, 146, 60, 0.15); }
.mov-saida .mov-tipo   { color: #4ade80; background: rgba(74, 222, 128, 0.15); }

.mov-info { flex: 1; min-width: 200px; }

.mov-meta {
    font-size: 0.7rem;
    color: var(--text-muted, #9ca3af);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .painel-patios-grid { grid-template-columns: 1fr; }
    .mov-meta { width: 100%; }
}

/* ============================================
   PÁTIO MANUAL — badges, card clicável e modal de detalhes
   ============================================ */

.badge-patio {
    display: inline-block;
    background: rgba(96, 165, 250, 0.13);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.4);
    padding: 0.05rem 0.45rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    margin-left: 0.3rem;
    vertical-align: middle;
    white-space: nowrap;
}

.btn-kanban-patio {
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.78rem;
    padding: 0.2rem 0.45rem;
}

.btn-kanban-patio:hover { background: rgba(96, 165, 250, 0.22); }

.carro-patio-clicavel { cursor: pointer; transition: border-color 0.15s ease, transform 0.1s ease; }
.carro-patio-clicavel:hover {
    border-color: rgba(96, 165, 250, 0.5);
    transform: translateY(-1px);
}

.carro-patio-rota {
    font-size: 0.74rem;
    color: var(--text-muted, #9ca3af);
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

/* Modal de detalhes do carro */
.modal-detalhe-carro { max-width: 560px; }

.detalhe-carro-status {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.detalhe-carro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1rem;
    margin-bottom: 1.1rem;
}

.detalhe-item { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.86rem; }
.detalhe-full { grid-column: 1 / -1; }

.detalhe-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #9ca3af);
    font-weight: 700;
}

.detalhe-rota { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }

.detalhe-carro-acoes {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.detalhe-carro-acoes .btn, .detalhe-carro-acoes .btn-patio-sair { min-height: 42px; }

@media (max-width: 640px) {
    .detalhe-carro-grid { grid-template-columns: 1fr; }
    .modal-detalhe-carro { width: 96vw; max-width: 96vw; }
    .detalhe-carro-acoes .btn, .detalhe-carro-acoes .btn-patio-sair { flex: 1 1 100%; }
}

/* ============================================
   FIX: opções de <select> ilegíveis no tema escuro
   (dropdown nativo abria com fundo branco do sistema
    e texto claro — ex.: filtro "Pedidos para Alocar")
   ============================================ */

/* Avisa o navegador que a página é escura: o popup nativo
   do select passa a ser renderizado no modo escuro */
:root { color-scheme: dark; }

/* Garantia extra: TODA opção de TODO select do sistema,
   dentro ou fora de .form-group */
select option {
    background-color: var(--black-panel, #1a1d24);
    color: var(--text-dark, #e5e7eb);
}

select optgroup {
    background-color: var(--black-panel, #1a1d24);
    color: var(--text-muted, #9ca3af);
}

/* ============================================
   FLUXO DE CONFIRMAÇÕES (T-4h / T-2h)
   ============================================ */

.tag-adefinir {
    display: inline-block;
    background: rgba(251, 191, 36, 0.13);
    color: #fbbf24;
    border: 1px dashed rgba(251, 191, 36, 0.5);
    padding: 0.02rem 0.4rem;
    border-radius: 4px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.btn-kanban-adefinir {
    background: rgba(251, 191, 36, 0.1);
    border: 1px dashed rgba(251, 191, 36, 0.45);
    color: #fbbf24;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
}

.btn-kanban-adefinir:hover { background: rgba(251, 191, 36, 0.2); }

.prazo-badge {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 800;
    white-space: nowrap;
    margin-left: auto;
}

.prazo-ok {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.4);
}

.prazo-atrasado {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.5);
    animation: pulsar-transbordo 1.5s ease-in-out infinite;
}

.prazo-semdata {
    color: var(--text-muted, #9ca3af);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.conf-titulo { font-size: 0.95rem; margin-bottom: 0.3rem; }

.conf-card {
    background: var(--bg-card, #1a1d24);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid #60a5fa;
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.6rem;
}

.conf-card-atrasada {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.04);
}

.conf-card-topo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.conf-card-linha {
    font-size: 0.8rem;
    color: var(--text-muted, #9ca3af);
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.conf-card-linha strong { color: var(--text-dark, #e5e7eb); }

.conf-card-acoes {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.55rem;
    align-items: center;
    flex-wrap: wrap;
}

.liberacoes-card {
    border: 1px solid rgba(251, 146, 60, 0.35);
    margin-bottom: 1.2rem;
}

.liberacoes-card h2 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

@media (max-width: 640px) {
    .conf-card-topo { flex-wrap: wrap; }
    .prazo-badge { margin-left: 0; }
    .conf-card-acoes .btn { flex: 1 1 100%; }
}

/* ============================================
   ACOMPANHAMENTO + OCORRÊNCIAS COM RETORNO
   ============================================ */

.acomp-filtros {
    display: flex;
    gap: 0.7rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
    background: var(--bg-card, #1a1d24);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
}

.acomp-filtro { display: flex; flex-direction: column; gap: 0.25rem; }

.acomp-filtro label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #9ca3af);
    font-weight: 700;
}

.acomp-filtro input[type="date"] {
    color-scheme: dark;
}

.acomp-acoes { white-space: nowrap; }
.acomp-acoes button { margin-right: 0.25rem; }

.ocorrencias-card {
    border: 1px solid rgba(251, 191, 36, 0.4);
    margin-bottom: 1.2rem;
}

.ocorrencias-card h2 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.ocorr-descricao {
    background: rgba(251, 191, 36, 0.06);
    border-left: 3px solid rgba(251, 191, 36, 0.5);
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    font-size: 0.85rem;
    margin: 0.45rem 0;
}

.ocorr-resposta-area {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    margin-top: 0.45rem;
}

.ocorr-resposta-area textarea {
    flex: 1;
    background: var(--black-elevated, #12141a);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--text-dark, #e5e7eb);
    padding: 0.5rem 0.7rem;
    font-size: 0.82rem;
    resize: vertical;
    font-family: inherit;
}

.ocorr-resposta-area textarea:focus {
    outline: none;
    border-color: rgba(251, 191, 36, 0.55);
}

@media (max-width: 640px) {
    .acomp-filtros { gap: 0.5rem; }
    .acomp-filtro { flex: 1 1 45%; }
    .ocorr-resposta-area { flex-direction: column; align-items: stretch; }
}

/* ============================================
   ETAPA 3 — EDIÇÃO DE PEDIDO
   ============================================ */

.btn-kanban-editar {
    background: rgba(167, 139, 250, 0.1);
    border: 1px solid rgba(167, 139, 250, 0.4);
    color: #a78bfa;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.78rem;
    padding: 0.2rem 0.45rem;
}

.btn-kanban-editar:hover { background: rgba(167, 139, 250, 0.22); }

.edicao-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1rem;
    margin-bottom: 1rem;
}

.edicao-grid .form-group { margin-bottom: 0; }

@media (max-width: 640px) {
    .edicao-grid { grid-template-columns: 1fr; }
}

/* ============================================
   ETAPA 2 — TRANSBORDO, CHECKLIST, MANIFESTO, FISCAL
   ============================================ */

.transbordo-tipo-opcoes {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.radio-inline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    flex: 1;
}

.radio-inline input { accent-color: #fb923c; }

.checklist-verif-box {
    background: rgba(74, 222, 128, 0.06);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
}

.checkbox-destaque {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.85rem;
    cursor: pointer;
    line-height: 1.4;
}

.checkbox-destaque input {
    width: 20px;
    height: 20px;
    accent-color: #4ade80;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.manifesto-qtd {
    font-size: 0.72rem;
    font-weight: 800;
    color: #f97316;
    background: rgba(249, 115, 22, 0.13);
    border: 1px solid rgba(249, 115, 22, 0.4);
    padding: 0.12rem 0.55rem;
    border-radius: 20px;
}

.conf-card-resolvido { opacity: 0.62; }

.tabela-scroll { overflow-x: auto; }

.tabela-padrao {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.tabela-padrao th, .tabela-padrao td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    text-align: left;
}

.tabela-padrao th {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #9ca3af);
    font-weight: 700;
}

/* ============================================
   OCR — CONFRONTO E VALIDAÇÃO DE PLACAS
   ============================================ */

.ocr-box {
    margin-top: 0.7rem;
    padding: 0.7rem 0.85rem;
    border-radius: 9px;
    font-size: 0.85rem;
    line-height: 1.45;
}

.ocr-lendo   { background: rgba(96,165,250,0.1);  border: 1px solid rgba(96,165,250,0.4);  color: #60a5fa; }
.ocr-ok      { background: rgba(74,222,128,0.1);  border: 1px solid rgba(74,222,128,0.45); color: #4ade80; }
.ocr-erro    { background: rgba(239,68,68,0.1);   border: 1px solid rgba(239,68,68,0.45);  color: #fca5a5; }
.ocr-neutro  { background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.4);  color: #fbbf24; }

.validacao-foto {
    max-width: 220px;
    max-height: 160px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    margin: 0.5rem 0;
    display: block;
    object-fit: cover;
}

/* ============================================
   PAINEL DE OCUPAÇÃO — RESUMO + FILTROS + TABELA (vivo)
   ============================================ */

.ocup-resumo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
    margin-bottom: 1.4rem;
}

.ocup-resumo-card {
    position: relative;
    background: linear-gradient(145deg, var(--black-panel, #1a1d24), rgba(255,255,255,0.015));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* faixa de cor no topo de cada card */
.ocup-resumo-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--c-card, #6b7280);
    opacity: 0.9;
}

.ocup-resumo-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 8px 26px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.03);
}

.ocup-resumo-card.ativo {
    border-color: var(--c-card, var(--orange, #ff6a00));
    box-shadow: 0 0 0 1px var(--c-card, var(--orange)), 0 6px 22px rgba(0,0,0,0.4);
}

.ocup-resumo-card.ativo::before { opacity: 1; height: 4px; }

.ocup-resumo-card[data-filtro=""]        { --c-card: #ff6a00; }
.ocup-resumo-card.ocup-pendente          { --c-card: #fbbf24; }
.ocup-resumo-card.ocup-emrota            { --c-card: #60a5fa; }
.ocup-resumo-card.ocup-entregue          { --c-card: #4ade80; }

.ocup-resumo-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #9ca3af);
    font-weight: 700;
}

.ocup-resumo-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ocup-resumo-num {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--c-card, #f5f4f1);
}

.ocup-resumo-ico {
    font-size: 1.1rem;
    opacity: 0.5;
}

.ocup-filtros {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
}

.ocup-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.ocup-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    padding: 0.42rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent;
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ocup-chip::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.65;
}

.ocup-chip:hover { border-color: rgba(255, 255, 255, 0.32); color: var(--text-dark, #f5f4f1); }

.ocup-chip[data-filtro="Pendente"] { color: #fbbf24; }
.ocup-chip[data-filtro="Em Rota"]  { color: #60a5fa; }
.ocup-chip[data-filtro="Entregue"] { color: #4ade80; }

.ocup-chip.active {
    color: #fff;
    font-weight: 700;
    border-color: transparent;
}
.ocup-chip.active[data-filtro=""]        { background: #ff6a00; }
.ocup-chip.active[data-filtro="Pendente"]{ background: #d99408; }
.ocup-chip.active[data-filtro="Em Rota"] { background: #3b82f6; }
.ocup-chip.active[data-filtro="Entregue"]{ background: #22a55a; }
.ocup-chip.active::before { opacity: 1; background: #fff; }

.ocup-busca {
    background: var(--black-elevated, #12141a);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: var(--text-dark, #e5e7eb);
    padding: 0.55rem 0.95rem;
    font-size: 0.85rem;
    min-width: 260px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ocup-busca:focus {
    outline: none;
    border-color: var(--orange, #ff6a00);
    box-shadow: 0 0 0 3px var(--orange-glow-soft, rgba(255,106,0,0.12));
}

.ocup-tabela {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.4rem;
    font-size: 0.85rem;
}

.ocup-tabela thead th {
    text-align: left;
    padding: 0.5rem 0.9rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #9ca3af);
    font-weight: 700;
    white-space: nowrap;
}

/* cada linha vira um "card-linha" com faixa de status à esquerda */
.ocup-tabela tbody tr {
    background: var(--black-panel, #1a1d24);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ocup-tabela tbody td {
    padding: 0.8rem 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

.ocup-tabela tbody td:first-child {
    border-left: 3px solid var(--row-cor, #6b7280);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.ocup-tabela tbody td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.ocup-tabela tbody tr:hover {
    transform: translateX(2px);
    box-shadow: -3px 0 0 0 var(--row-cor, #6b7280), 0 4px 16px rgba(0,0,0,0.28);
}

.ocup-id { font-size: 0.72rem; color: var(--text-muted, #9ca3af); font-weight: 700; }
.ocup-cliente { font-weight: 700; }
.ocup-sub { font-size: 0.76rem; color: var(--text-muted, #9ca3af); }

.ocup-rota-cell { font-size: 0.78rem; color: var(--text-muted, #9ca3af); }

/* ponto pulsante para "em rota" */
.ocup-pulse {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #60a5fa;
    margin-right: 0.35rem;
    vertical-align: middle;
    animation: ocupPulse 1.5s ease-in-out infinite;
}

@keyframes ocupPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(96,165,250,0.5); }
    50%      { box-shadow: 0 0 0 5px rgba(96,165,250,0); }
}

.status-pill-vivo {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.ocup-acoes-cell { text-align: right; white-space: nowrap; }
.ocup-acoes-cell button { margin-left: 0.25rem; }

@media (prefers-reduced-motion: reduce) {
    .ocup-pulse { animation: none; }
}

/* Mobile: tabela vira cards empilhados */
@media (max-width: 760px) {
    .ocup-resumo { grid-template-columns: repeat(2, 1fr); }
    .ocup-filtros { flex-direction: column; align-items: stretch; }
    .ocup-busca { min-width: 0; width: 100%; }

    .ocup-tabela thead { display: none; }
    .ocup-tabela, .ocup-tabela tbody, .ocup-tabela tr, .ocup-tabela td { display: block; width: 100%; }
    .ocup-tabela tbody tr {
        border-radius: 12px;
        margin-bottom: 0.7rem;
        padding: 0.2rem 0.2rem;
        border-left: 3px solid var(--row-cor, #6b7280);
    }
    .ocup-tabela tbody td { border: none; padding: 0.4rem 0.9rem; }
    .ocup-tabela tbody td:first-child { border-left: none; }
    .ocup-tabela tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.62rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted, #9ca3af);
        font-weight: 700;
        margin-bottom: 0.15rem;
    }
    .ocup-acoes-cell { text-align: left; }
    .ocup-acoes-cell button { margin: 0.15rem 0.25rem 0.15rem 0; }
}

/* ============================================
   PADRÃO "VIVO" GLOBAL — aplica a todos os painéis
   ============================================ */

/* --- Dashboard comercial: barra de cor no topo + elevação --- */
.dash-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(20,20,26,0.95), rgba(255,255,255,0.012));
}
.dash-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--orange, #ff6a00);
    opacity: 0.85;
}
.dash-card:nth-child(1)::before { background: #ff6a00; }
.dash-card:nth-child(2)::before { background: #fbbf24; }
.dash-card:nth-child(3)::before { background: #60a5fa; }
.dash-card:nth-child(4)::before { background: #4ade80; }
.dash-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    border-color: rgba(255,255,255,0.14);
}
.dash-icon {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
    transition: transform 0.18s ease;
}
.dash-card:hover .dash-icon { transform: scale(1.12); }

/* --- Cards de resumo genéricos (pátios, confirmações, fiscal) --- */
.patios-resumo-item {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, var(--black-panel, #1a1d24), rgba(255,255,255,0.012));
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.patios-resumo-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #fb923c;
    opacity: 0.85;
}
.patios-resumo-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.patios-resumo-alerta::before { background: #ef4444; }
.patios-resumo-alerta { animation: none; }

/* --- Conf-cards (confirmações, liberações, ocorrências, edições, fiscal) --- */
.conf-card {
    transition: transform 0.13s ease, box-shadow 0.13s ease, border-left-color 0.13s ease;
}
.conf-card:hover {
    transform: translateX(3px);
    box-shadow: -4px 0 0 0 currentColor, 0 4px 16px rgba(0,0,0,0.25);
}
.conf-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.28); }

/* --- Cards de pátio e manifesto: brilho no hover --- */
.patio-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.patio-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.32);
    border-color: rgba(251,146,60,0.45);
}
.carro-patio-clicavel:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}

/* --- Cegonha-card: barra lateral e elevação --- */
.cegonha-card {
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.2s ease;
    background: linear-gradient(145deg, rgba(18,18,24,0.95), rgba(255,255,255,0.01));
}
.cegonha-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 26px rgba(0,0,0,0.35);
    border-color: rgba(249,115,22,0.4);
}

/* --- Resumo-card (fechamento financeiro) --- */
.resumo-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.resumo-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #4ade80;
    opacity: 0.8;
}
.resumo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* --- Badges de status: leve realce em todo o sistema --- */
.status-badge-inline, .status-pill-vivo {
    transition: transform 0.12s ease;
}
.status-badge-inline:hover, .status-pill-vivo:hover { transform: scale(1.04); }

/* --- Abas internas da logística: sublinhado animado --- */
.log-tab-btn {
    position: relative;
    transition: color 0.15s ease;
}
.log-tab-btn::after {
    content: '';
    position: absolute;
    left: 50%; right: 50%;
    bottom: -1px;
    height: 2px;
    background: var(--orange, #ff6a00);
    transition: left 0.2s ease, right 0.2s ease;
}
.log-tab-btn.active::after { left: 0; right: 0; }
.log-tab-btn:hover::after { left: 20%; right: 20%; }

/* --- Botões de ação: micro-feedback ao clicar --- */
.btn-kanban-status, .btn-kanban-hist, .btn-kanban-patio,
.btn-kanban-ocorr, .btn-kanban-receita, .btn-kanban-editar {
    transition: transform 0.1s ease, filter 0.12s ease, background 0.15s ease;
}
.btn-kanban-status:active, .btn-kanban-hist:active, .btn-kanban-patio:active,
.btn-kanban-ocorr:active, .btn-kanban-receita:active, .btn-kanban-editar:active {
    transform: scale(0.92);
}

@media (prefers-reduced-motion: reduce) {
    .dash-card, .patios-resumo-item, .conf-card, .patio-card,
    .cegonha-card, .resumo-card { transition: none; }
    .dash-card:hover, .patios-resumo-item:hover, .conf-card:hover,
    .patio-card:hover, .cegonha-card:hover, .resumo-card:hover { transform: none; }
}

/* Respeitar preferência de menos movimento nos modais e login */
@media (prefers-reduced-motion: reduce) {
    .modal-content, .login-card { animation: none; }
    .login-logo-img { animation: none; }
    .login-btn::after { display: none; }
    .close:hover { transform: none; }
    .perfil-acesso-card:hover { transform: none; }
}

/* Motorista: respeitar menos movimento */
@media (prefers-reduced-motion: reduce) {
    .mp-pulse { animation: none; }
    .motorista-pedido-card, .motorista-acao-card, .btn-pdf-carga, .btn-motorista-acao { transition: none; }
    .motorista-acao-card:hover { transform: none; }
}

/* ============================================
   FISCAL — CHECK DE CTE EMITIDO
   ============================================ */

.cte-resumo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 10px;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    color: var(--text-muted, #9ca3af);
}

.cte-resumo-num {
    font-size: 1.3rem;
    font-weight: 800;
    color: #4ade80;
}

.cte-resumo-alerta {
    background: rgba(251, 146, 60, 0.1);
    border-color: rgba(251, 146, 60, 0.4);
}

.cte-resumo-alerta .cte-resumo-num { color: #fb923c; }

.selo-cte-ok {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.35);
    padding: 0.05rem 0.45rem;
    border-radius: 4px;
}

.selo-cte-pend {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.35);
    padding: 0.05rem 0.45rem;
    border-radius: 4px;
}

.linha-cte-emitido { opacity: 0.72; }
.linha-cte-emitido td { background: rgba(74, 222, 128, 0.03); }

.fiscal-acoes-td {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    white-space: nowrap;
}

/* ============================================
   CANCELAR / EXCLUIR PEDIDO PENDENTE
   ============================================ */

.btn-kanban-cancelar {
    background: rgba(251, 146, 60, 0.1);
    border: 1px solid rgba(251, 146, 60, 0.4);
    color: #fb923c;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    transition: background 0.15s ease, transform 0.1s ease;
}
.btn-kanban-cancelar:hover { background: rgba(251, 146, 60, 0.22); }
.btn-kanban-cancelar:active { transform: scale(0.92); }

.btn-kanban-excluir {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.78rem;
    padding: 0.2rem 0.45rem;
    transition: background 0.15s ease, transform 0.1s ease;
}
.btn-kanban-excluir:hover { background: rgba(239, 68, 68, 0.22); }
.btn-kanban-excluir:active { transform: scale(0.92); }

/* ============================================
   MENU DE AÇÕES "?" + RODAPÉ LIMPO DO CARD
   ============================================ */

.drag-card-top-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.drag-card-bottom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

.btn-acao-principal {
    flex: 1;
    background: var(--orange, #ff6a00);
    color: #12120f;
    border: none;
    border-radius: 8px;
    padding: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.1s ease;
}
.btn-acao-principal:hover { filter: brightness(1.08); }
.btn-acao-principal:active { transform: scale(0.97); }

.menu-acoes-wrap { position: relative; flex-shrink: 0; }

.btn-menu-acoes {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text-muted, #9ca3af);
    border-radius: 8px;
    width: 38px;
    height: 34px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-menu-acoes:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.28);
    color: var(--text-dark, #f5f4f1);
}

.menu-acoes-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 170px;
    background: #1e1e24;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    padding: 0.35rem;
    z-index: 50;
    animation: menuAcoesIn 0.15s ease-out;
}
.menu-acoes-dropdown.aberto { display: block; }

@keyframes menuAcoesIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.menu-acao-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-dark, #e5e7eb);
    font-size: 0.83rem;
    text-align: left;
    padding: 0.55rem 0.65rem;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.menu-acao-item:hover { background: rgba(255,255,255,0.07); }
.menu-acao-ico { width: 1.1rem; text-align: center; }

.menu-acao-alerta { color: #fb923c; }
.menu-acao-alerta:hover { background: rgba(251,146,60,0.12); }
.menu-acao-perigo { color: #ef4444; }
.menu-acao-perigo:hover { background: rgba(239,68,68,0.12); }

@media (prefers-reduced-motion: reduce) {
    .menu-acoes-dropdown { animation: none; }
}

/* Badge de referência (OC / ID / Solicitação) */
.badge-ref {
    display: inline-block;
    background: rgba(148, 163, 184, 0.14);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.35);
    padding: 0.05rem 0.45rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    margin-left: 0.3rem;
    vertical-align: middle;
    white-space: nowrap;
}

/* ============================================
   NOVO PEDIDO — SEÇÕES ORGANIZADAS
   ============================================ */

.form-secao {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1.2rem 1.3rem;
    margin-bottom: 1.1rem;
}

.form-secao-titulo {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--orange, #ff6a00);
    margin-bottom: 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* espaçamento entre linhas dentro de uma seção */
.form-secao .form-row + .form-row { margin-top: 1rem; }

/* CEP + endereço na mesma linha, alinhados */
.cep-endereco-linha {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0.6rem;
}

.cep-endereco-linha .input-cep { width: 100%; }

/* Botão adicionar veículo: sem quebrar o ritmo, dentro da seção */
.form-secao .btn-add-veiculo { margin-top: 0.8rem; }

/* Observações: textarea cresce mas alinha com o campo ao lado */
#observacaoPedido {
    resize: vertical;
    min-height: 42px;
}

@media (max-width: 640px) {
    .cep-endereco-linha { grid-template-columns: 90px 1fr; }
    .form-secao { padding: 1rem; }
}

/* Linhas de veículo extra dentro da seção Veículos */
#veiculosExtras .veiculo-extra-row { margin-top: 0.9rem; }

/* ============================================
   RESUMO DO COMERCIAL — painel com título
   ============================================ */

.resumo-comercial-painel {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 1.1rem 1.3rem 1.3rem;
    margin-bottom: 1.3rem;
}

.resumo-comercial-titulo {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--orange, #ff6a00);
    margin-bottom: 0.9rem;
}

/* dentro do painel, o dashboard perde a margem inferior própria */
.resumo-comercial-painel .comercial-dashboard { margin-bottom: 0; }

/* ============================================
   CEGONHA TERCEIRA
   ============================================ */

.badge-terceiro {
    display: inline-block;
    background: rgba(167, 139, 250, 0.16);
    color: #a78bfa;
    border: 1px solid rgba(167, 139, 250, 0.4);
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    margin-left: 0.4rem;
    vertical-align: middle;
}

.cegonha-transportador {
    font-size: 0.75rem;
    color: #a78bfa;
    padding: 0 1.1rem 0.3rem;
    margin-top: -0.2rem;
}

/* ============================================
   FIX: alocação — colunas com altura fixa e scroll próprio
   ============================================ */

.pedidos-drag-list,
.veiculos-drop-list {
    max-height: calc(100vh - 260px);
    min-height: 300px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.veiculos-drop-list.arrastando .drop-zone {
    border-color: rgba(249,115,22,0.5);
    background: rgba(249,115,22,0.06);
}

.drop-zone.drag-over {
    border-color: #f97316 !important;
    background: rgba(249,115,22,0.15) !important;
    transform: scale(1.01);
}

.pedidos-drag-list::-webkit-scrollbar,
.veiculos-drop-list::-webkit-scrollbar { width: 8px; }
.pedidos-drag-list::-webkit-scrollbar-thumb,
.veiculos-drop-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.14);
    border-radius: 4px;
}

/* Custo do frete terceiro no card da cegonha */
.cegonha-terceiro-fin {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 1.1rem 0.9rem;
    flex-wrap: wrap;
}
.ct-fin-item { display: flex; flex-direction: column; }
.ct-fin-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #9ca3af);
    font-weight: 700;
}
.ct-fin-val { font-size: 0.9rem; font-weight: 700; }
.btn-custo-terceiro {
    margin-left: auto;
    background: rgba(251,146,60,0.12);
    border: 1px solid rgba(251,146,60,0.4);
    color: #fb923c;
    border-radius: 7px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-custo-terceiro:hover { background: rgba(251,146,60,0.22); }

/* ============================================
   PRAZO DE ENTREGA ESTIMADO (promessa ao cliente)
   ============================================ */

.prazo-entrega {
    display: inline-block;
    padding: 0.08rem 0.45rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.prazo-ent-ok {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.35);
}

.prazo-ent-perto {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.prazo-ent-vencido {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.5);
    animation: pulsar-transbordo 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .prazo-ent-vencido { animation: none; }
}
/* ============================================
   VAGA DA CEGONHA — modelo do carro + cliente completo
   (permite avaliar se os 11 carros cabem)
   ============================================ */

.vaga-modelo {
    font-size: 0.7rem;
    font-weight: 700;
    color: #fdba74;
    line-height: 1.15;
    word-break: break-word;
}

/* cliente agora mostra o nome completo, com quebra */
.vaga-cliente {
    line-height: 1.15;
    word-break: break-word;
}

.cegonha-vaga.ocupada { min-height: 96px; }

/* Painel de terceiros: leve destaque roxo para diferenciar da frota */
#painelTerceiros .cegonha-card {
    border-color: rgba(167, 139, 250, 0.28);
}
#painelTerceiros .cegonha-card:hover {
    border-color: rgba(167, 139, 250, 0.5);
}

/* ============================================
   ROTA DA CEGONHA + PLACA NA VAGA
   ============================================ */

.vaga-placa {
    display: inline-block;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text-dark, #f5f4f1);
    padding: 0 0.3rem;
    border-radius: 3px;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.cegonha-rota {
    padding: 0.5rem 1rem 0.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cegonha-rota-titulo {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--text-muted, #9ca3af);
}

.cegonha-rota-linha {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
    line-height: 1.5;
}

.rota-ponto {
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
}

.rota-coletar {
    color: #fbbf24;
    background: rgba(251,191,36,0.1);
    border: 1px solid rgba(251,191,36,0.3);
}

.rota-feito {
    color: #4ade80;
    background: rgba(74,222,128,0.08);
    border: 1px solid rgba(74,222,128,0.25);
}

.rota-patio {
    color: #fb923c;
    background: rgba(251,146,60,0.1);
    border: 1px solid rgba(251,146,60,0.35);
}

.rota-destino {
    color: #60a5fa;
    background: rgba(96,165,250,0.1);
    border: 1px solid rgba(96,165,250,0.3);
}

.rota-seta {
    color: rgba(255,255,255,0.3);
    font-size: 0.7rem;
}

/* ============================================
   ROTAS PLANEJADAS
   ============================================ */

.rotas-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.rota-card {
    background: linear-gradient(145deg, var(--black-panel, #1a1d24), rgba(255,255,255,0.012));
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 3px solid #60a5fa;
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}

.rota-card-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.rota-nome {
    font-size: 1rem;
    font-weight: 700;
    margin-right: 0.5rem;
}

.rota-ocupacao { font-size: 0.85rem; font-weight: 800; }

.rota-meta {
    font-size: 0.8rem;
    color: var(--text-muted, #9ca3af);
    margin-top: 0.3rem;
}

.rota-barra {
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
    margin: 0.6rem 0 0.9rem;
}

.rota-barra-inner {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.22,1,0.36,1);
}

.rota-secao { margin-bottom: 0.8rem; }

.rota-secao-titulo {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--text-muted, #9ca3af);
    margin-bottom: 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.rota-pedido-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    border-radius: 7px;
    font-size: 0.8rem;
    flex-wrap: wrap;
    background: rgba(255,255,255,0.02);
    margin-bottom: 0.3rem;
}

.rota-pedido-sugerido {
    background: rgba(96,165,250,0.06);
    border: 1px dashed rgba(96,165,250,0.3);
}

.rota-pedido-rota {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 600;
    margin-left: auto;
}

.rota-acoes {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* Modal: paradas */
.rota-parada-add {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.rota-parada-add input { flex: 1; }

.lista-paradas {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.parada-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}

.parada-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(96,165,250,0.18);
    color: #60a5fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    flex-shrink: 0;
}

.parada-nome { flex: 1; }

.parada-item button {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text-muted, #9ca3af);
    border-radius: 5px;
    width: 26px; height: 24px;
    cursor: pointer;
    font-size: 0.65rem;
}
.parada-item button:hover:not(:disabled) { background: rgba(255,255,255,0.08); }
.parada-item button:disabled { opacity: 0.3; cursor: default; }
.parada-remover { color: #ef4444 !important; border-color: rgba(239,68,68,0.35) !important; }

@media (max-width: 640px) {
    .rota-pedido-rota { margin-left: 0; width: 100%; }
}

/* Badge de rota planejada na tela de alocação */
.badge-rota-planejada {
    display: inline-block;
    background: rgba(96,165,250,0.15);
    color: #60a5fa;
    border: 1px solid rgba(96,165,250,0.4);
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    margin-left: 0.3rem;
    vertical-align: middle;
    white-space: nowrap;
}

/* ============================================
   LISTAS RECOLHÍVEIS (Cadastros)
   ============================================ */

.titulo-colapsavel {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.15s ease;
}

.titulo-colapsavel:hover { color: var(--orange, #ff6a00); }

.chevron-colapso {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--orange, #ff6a00);
    transition: transform 0.2s ease;
    width: 14px;
}

.card-lista-corpo {
    animation: listaAbre 0.2s ease-out;
}

@keyframes listaAbre {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .card-lista-corpo { animation: none; }
}
/* Aviso de motorista sem vínculo de cadastro */
.aviso-sem-vinculo {
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    font-size: 0.88rem;
    line-height: 1.5;
}
.aviso-sem-vinculo strong { color: #fbbf24; display: block; margin-bottom: 0.4rem; }
.aviso-sem-vinculo p { margin: 0; color: var(--text-muted, #9ca3af); }

/* Resumo do motorista já definido pela cegonha (alocação) */
.aloc-motorista-resumo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    background: rgba(74, 222, 128, 0.07);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
    flex-wrap: wrap;
}

.aloc-motorista-resumo strong { color: #4ade80; }

.btn-trocar-motorista {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--text-muted, #9ca3af);
    border-radius: 7px;
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.btn-trocar-motorista:hover {
    border-color: var(--orange, #ff6a00);
    color: var(--orange, #ff6a00);
}
/* ============================================
   ALERTA: FOTO DA PLACA REPROVADA (motorista)
   ============================================ */

.alerta-foto-reprovada {
    background: linear-gradient(145deg, rgba(239,68,68,0.14), rgba(239,68,68,0.06));
    border: 1px solid rgba(239,68,68,0.5);
    border-left: 4px solid #ef4444;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.8rem;
    animation: pulsar-transbordo 2s ease-in-out infinite;
}

.afr-titulo {
    font-size: 0.92rem;
    font-weight: 800;
    color: #ef4444;
    margin-bottom: 0.35rem;
}

.afr-pedido {
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
}

.afr-motivo {
    background: rgba(0,0,0,0.25);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    font-size: 0.85rem;
    line-height: 1.45;
    margin-bottom: 0.4rem;
}

.afr-quem {
    font-size: 0.7rem;
    color: var(--text-muted, #9ca3af);
    margin-bottom: 0.6rem;
}

.btn-refazer-foto {
    width: 100%;
    min-height: 48px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.1s ease, filter 0.15s ease;
}

.btn-refazer-foto:hover { filter: brightness(1.1); }
.btn-refazer-foto:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
    .alerta-foto-reprovada { animation: none; }
}

/* ============================================
   PWA — dica de instalação no celular
   ============================================ */

.dica-instalar-pwa {
    position: fixed;
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.9rem;
    z-index: 9000;
    background: linear-gradient(145deg, #1e1e26, #15151b);
    border: 1px solid rgba(255, 106, 0, 0.45);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
    animation: dicaSobe 0.35s ease-out;
}

@keyframes dicaSobe {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.dica-instalar-texto {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    font-size: 0.82rem;
    line-height: 1.4;
}

.dica-instalar-texto strong { color: var(--orange, #ff6a00); }
.dica-instalar-texto span { color: var(--text-muted, #9ca3af); }
.dica-instalar-texto b { color: var(--text-dark, #f5f4f1); }

.dica-instalar-fechar {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--text-muted, #9ca3af);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 0.85rem;
}

.btn-instalar-pwa {
    position: fixed;
    right: 0.9rem;
    bottom: 0.9rem;
    z-index: 9000;
    background: rgba(255, 106, 0, 0.12);
    color: var(--orange, #ff6a00);
    border: 1px solid rgba(255, 106, 0, 0.35);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.7;
    backdrop-filter: blur(4px);
    box-shadow: none;
    transition: opacity .2s;
}
.btn-instalar-pwa:hover { opacity: 1; }

/* Respeita a área da barra de status/gestos quando instalado */
@media (display-mode: standalone) {
    body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}

@media (prefers-reduced-motion: reduce) {
    .dica-instalar-pwa { animation: none; }
}

/* ============================================
   VISÃO POR ROTA — período e totais
   ============================================ */

.rotas-filtro-periodo {
    display: flex;
    align-items: flex-end;
    gap: 0.7rem;
    flex-wrap: wrap;
    padding: 0.8rem 0.9rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    margin-bottom: 0.9rem;
}

.rotas-filtro-periodo input[type="date"] { color-scheme: dark; }

.rotas-totais-gerais {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-left: auto;
    align-items: center;
}

.rtg-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
}

.rtg-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #9ca3af);
    font-weight: 700;
    white-space: nowrap;
}

.rtg-valor {
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
}

.rtg-destaque {
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.35);
}

.rtg-destaque .rtg-valor { color: #4ade80; }

.rota-numeros {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0.4rem 0 0.2rem;
    font-size: 0.72rem;
    color: var(--text-muted, #9ca3af);
}

.rn-item strong { color: var(--text-dark, #f5f4f1); }

@media (max-width: 760px) {
    .rotas-totais-gerais { margin-left: 0; width: 100%; }
    .rtg-item { flex: 1 1 40%; }
}

/* ============================================
   AVISO DE NOTIFICAÇÕES (motorista)
   ============================================ */

.aviso-notif {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.4);
    border-radius: 12px;
    padding: 0.8rem 0.95rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    line-height: 1.4;
    flex-wrap: wrap;
}

.aviso-notif span { flex: 1; min-width: 180px; }

.aviso-notif-info {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text-muted, #9ca3af);
}

.btn-ativar-notif {
    background: #60a5fa;
    color: #0a0a0d;
    border: none;
    border-radius: 10px;
    min-height: 44px;
    padding: 0 1.3rem;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.1s ease, filter 0.15s ease;
}

.btn-ativar-notif:hover { filter: brightness(1.1); }
.btn-ativar-notif:active { transform: scale(0.96); }

/* ============================================
   CAMPO DE SENHA COM BOTÃO DE VER/OCULTAR
   (o botão nativo do navegador não é confiável:
    o Chrome não mostra e ele some no app instalado)
   ============================================ */

.campo-senha {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.campo-senha input {
    width: 100%;
    /* espaço para o botão não cobrir o texto digitado */
    padding-right: 3rem !important;
}

.btn-olho-senha {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    /* alvo de toque confortável no celular */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    opacity: 0.55;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.btn-olho-senha:hover { opacity: 1; background: rgba(255, 255, 255, 0.06); }
.btn-olho-senha:active { transform: translateY(-50%) scale(0.9); }
.btn-olho-senha.ativo { opacity: 1; }

/* Esconde o botão nativo do Edge para não ficarem dois olhos */
.campo-senha input::-ms-reveal,
.campo-senha input::-ms-clear {
    display: none;
}

/* ============================================
   ESQUECI MINHA SENHA
   ============================================ */

.link-esqueci-senha {
    display: block;
    width: 100%;
    margin-top: 0.9rem;
    background: transparent;
    border: none;
    color: var(--text-muted, #9ca3af);
    font-size: 0.85rem;
    cursor: pointer;
    text-align: center;
    padding: 0.5rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
    font-family: inherit;
}

.link-esqueci-senha:hover { color: var(--orange, #ff6a00); }

/* Bloco de troca de senha no modal de edição de acesso */
.bloco-nova-senha {
    background: rgba(251, 191, 36, 0.06);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 10px;
    padding: 0.8rem 0.95rem;
    margin-bottom: 1rem;
}

/* ============================================
   AVISO DE NOVA VERSÃO DO APP (PWA)
   ============================================ */

.aviso-nova-versao {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 9500;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: #1e1e26;
    border: 1px solid rgba(255, 106, 0, 0.5);
    border-radius: 26px;
    padding: 0.6rem 0.7rem 0.6rem 1.1rem;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
    font-size: 0.85rem;
    white-space: nowrap;
    animation: novaVersaoSobe 0.3s ease-out;
}

@keyframes novaVersaoSobe {
    from { transform: translate(-50%, 20px); opacity: 0; }
    to   { transform: translate(-50%, 0); opacity: 1; }
}

.btn-atualizar-app {
    background: var(--orange, #ff6a00);
    color: #12120f;
    border: none;
    border-radius: 20px;
    padding: 0.45rem 1.1rem;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.btn-atualizar-app:active { transform: scale(0.96); }

@media (prefers-reduced-motion: reduce) {
    .aviso-nova-versao { animation: none; }
}
/* ============================================
   SELO DE OCORRÊNCIAS NA ABA
   ============================================ */

.selo-aba {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    margin-left: 0.35rem;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    text-align: center;
    vertical-align: middle;
    animation: pulsoSelo 2s ease-in-out infinite;
}

@keyframes pulsoSelo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    50%      { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}

/* ============================================
   CARGA FECHADA (bloco recolhido na alocação)
   ============================================ */

.carga-fechada {
    background: linear-gradient(145deg, rgba(167,139,250,0.10), rgba(255,255,255,0.02));
    border: 1px solid rgba(167, 139, 250, 0.35);
    border-left: 3px solid #a78bfa;
    border-radius: 10px;
    margin-bottom: 0.6rem;
    cursor: grab;
    transition: border-color 0.15s ease, transform 0.1s ease;
}

.carga-fechada:hover { border-color: rgba(167, 139, 250, 0.6); }
.carga-fechada.dragging { opacity: 0.5; transform: scale(0.98); }

.cf-topo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    cursor: pointer;
}

.cf-chevron { color: #a78bfa; font-size: 0.8rem; width: 12px; flex-shrink: 0; }

.cf-info { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }

.cf-titulo {
    font-size: 0.8rem;
    font-weight: 800;
    color: #a78bfa;
}

.cf-cliente { font-size: 0.85rem; font-weight: 600; }

.cf-rota { font-size: 0.72rem; color: var(--text-muted, #9ca3af); }

.cf-valor {
    font-size: 0.85rem;
    font-weight: 700;
    color: #4ade80;
    white-space: nowrap;
}

.cf-itens {
    padding: 0 0.85rem 0.3rem;
    border-top: 1px solid rgba(167, 139, 250, 0.18);
}

.cf-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0;
    font-size: 0.76rem;
    color: var(--text-muted, #9ca3af);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.cf-item:last-child { border-bottom: none; }
.cf-item strong { color: var(--text-dark, #f5f4f1); }
.cf-item-valor { margin-left: auto; color: #4ade80; }

.cf-rodape {
    padding: 0.35rem 0.85rem 0.6rem;
}

.cf-dica {
    font-size: 0.68rem;
    color: rgba(167, 139, 250, 0.75);
    font-style: italic;
}

.badge-carga-fechada {
    display: inline-block;
    background: rgba(167, 139, 250, 0.16);
    color: #a78bfa;
    border: 1px solid rgba(167, 139, 250, 0.4);
    padding: 0.02rem 0.4rem;
    border-radius: 4px;
    font-size: 0.66rem;
    font-weight: 800;
    margin-left: 0.3rem;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .selo-aba { animation: none; }
}

/* ============================================
   FOLGAS E LEMBRETES
   ============================================ */

.folga-card {
    background: var(--black-panel, #1a1d24);
    border: 1px solid rgba(255,255,255,0.07);
    border-left: 3px solid #60a5fa;
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.55rem;
}

.folga-topo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.folga-tipo {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.12rem 0.5rem;
    border-radius: 20px;
    white-space: nowrap;
}

.folga-quem {
    font-size: 0.88rem;
    font-weight: 700;
    flex: 1;
    min-width: 120px;
}

.folga-data {
    font-size: 0.78rem;
    color: var(--text-muted, #9ca3af);
    white-space: nowrap;
}

.folga-desc {
    font-size: 0.78rem;
    color: var(--text-muted, #9ca3af);
    margin-top: 0.35rem;
    padding-left: 0.1rem;
}

.folgas-passadas { opacity: 0.55; }

/* Aviso no modal de alocação */
.aviso-folga-alocacao {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    line-height: 1.45;
}

.aviso-folga-alocacao strong { color: #fbbf24; }
.aviso-folga-alocacao span { color: var(--text-muted, #9ca3af); }

/* ============================================
   VISÃO GERAL — DIRETORIA
   ============================================ */

.dir-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}

.dir-titulo { margin: 0; font-size: 1.3rem; }

.dir-subtitulo {
    font-size: 0.78rem;
    color: var(--text-muted, #9ca3af);
}

/* --- Alertas --- */
.dir-alertas {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.dir-alerta {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: rgba(239, 68, 68, 0.09);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 10px;
    padding: 0.65rem 0.95rem;
    font-size: 0.82rem;
    color: var(--text-muted, #9ca3af);
}

.dir-alerta-num {
    font-size: 1rem;
    font-weight: 800;
    color: #ef4444;
    white-space: nowrap;
}

.dir-tudo-ok {
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.35);
    border-radius: 10px;
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
    color: #4ade80;
    margin-bottom: 1.2rem;
}

/* --- KPIs --- */
.dir-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
    margin-bottom: 1.4rem;
}

.dir-kpi {
    background: linear-gradient(145deg, var(--black-panel, #1a1d24), rgba(255,255,255,0.012));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.dir-kpi-rot {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #9ca3af);
    font-weight: 700;
}

.dir-kpi-num { font-size: 2rem; font-weight: 800; line-height: 1; }

.dir-kpi-obs { font-size: 0.72rem; color: var(--text-muted, #9ca3af); }

.dir-var { font-weight: 800; }
.dir-var-alta  { color: #4ade80; }
.dir-var-baixa { color: #ef4444; }

/* --- Blocos --- */
.dir-colunas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dir-bloco {
    background: var(--black-panel, #1a1d24);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 1rem 1.15rem;
}

.dir-bloco-titulo {
    font-size: 0.85rem;
    margin: 0 0 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* --- Barras --- */
.dir-barra-linha {
    display: grid;
    grid-template-columns: 110px 1fr 120px;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.6rem;
}

.dir-barra-rot {
    font-size: 0.76rem;
    color: var(--text-dark, #f5f4f1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dir-barra-trilho {
    height: 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 5px;
    overflow: hidden;
}

.dir-barra {
    height: 100%;
    border-radius: 5px;
    transition: width 0.6s cubic-bezier(0.22,1,0.36,1);
}

.dir-barra-val {
    font-size: 0.76rem;
    font-weight: 700;
    text-align: right;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.dir-barra-val small {
    font-size: 0.64rem;
    font-weight: 400;
    color: var(--text-muted, #9ca3af);
}

.badge-diretoria {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.35);
}

.badge-manutencao {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

@media (max-width: 1000px) {
    .dir-kpis { grid-template-columns: repeat(2, 1fr); }
    .dir-colunas { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .dir-kpis { grid-template-columns: 1fr; }
    .dir-barra-linha { grid-template-columns: 90px 1fr 96px; gap: 0.5rem; }
}

/* ============================================
   ORÇAMENTO POR HISTÓRICO
   ============================================ */

.orc-aviso {
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    font-size: 0.88rem;
    line-height: 1.5;
}

.orc-resultado { margin-top: 1.2rem; }

.orc-sugestao {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.orc-sug-principal, .orc-sug-total {
    flex: 1;
    min-width: 220px;
    background: linear-gradient(145deg, rgba(74,222,128,0.10), rgba(255,255,255,0.015));
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 14px;
    padding: 1.1rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.orc-sug-total {
    background: linear-gradient(145deg, rgba(96,165,250,0.10), rgba(255,255,255,0.015));
    border-color: rgba(96, 165, 250, 0.3);
}

.orc-sug-rot {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #9ca3af);
    font-weight: 700;
}

.orc-sug-num {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    color: #4ade80;
}

.orc-sug-obs { font-size: 0.74rem; color: var(--text-muted, #9ca3af); }

.orc-base {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--text-muted, #9ca3af);
    margin-bottom: 1rem;
}

.orc-conf {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    border: 1px solid;
    white-space: nowrap;
}

.orc-faixas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.7rem;
    margin-bottom: 1.3rem;
}

.orc-faixa {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.orc-faixa span {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #9ca3af);
    font-weight: 700;
}

.orc-faixa strong { font-size: 0.95rem; }

.orc-titulo-lista {
    font-size: 0.85rem;
    margin: 0 0 0.7rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.orc-cat {
    display: inline-block;
    background: rgba(96,165,250,0.14);
    color: #60a5fa;
    border: 1px solid rgba(96,165,250,0.35);
    padding: 0 0.35rem;
    border-radius: 4px;
    font-size: 0.64rem;
    font-weight: 700;
}

@media (max-width: 760px) {
    .orc-faixas { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   CENTRAL DE NOTIFICAÇÕES (sino)
   ============================================ */

.sino-wrap { position: relative; display: inline-flex; }

.btn-sino {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    width: 40px;
    height: 36px;
    font-size: 1.05rem;
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-sino:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); }

.sino-contador {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #60a5fa;
    color: #0a0a0d;
    font-size: 0.66rem;
    font-weight: 800;
    text-align: center;
}

.sino-contador.sino-acao {
    background: #ef4444;
    color: #fff;
    animation: pulsoSelo 2s ease-in-out infinite;
}

.painel-notificacoes {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-width: 90vw;
    max-height: 460px;
    background: #1a1a20;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    box-shadow: 0 16px 46px rgba(0,0,0,0.6);
    z-index: 3000;
    overflow: hidden;
    flex-direction: column;
}

.painel-notificacoes.aberto { display: flex; }

.pn-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.09);
    font-size: 0.88rem;
}

.pn-marcar {
    background: transparent;
    border: none;
    color: var(--text-muted, #9ca3af);
    font-size: 0.72rem;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
}
.pn-marcar:hover { color: var(--orange, #ff6a00); }

.pn-lista { overflow-y: auto; flex: 1; }

.pn-vazio {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted, #9ca3af);
    font-size: 0.85rem;
}

.pn-item {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    transition: background 0.12s ease;
    border-left: 3px solid transparent;
}

.pn-item:hover { background: rgba(255,255,255,0.04); }

.pn-nova { background: rgba(96,165,250,0.06); border-left-color: #60a5fa; }
.pn-acao.pn-nova { background: rgba(239,68,68,0.07); border-left-color: #ef4444; }

.pn-item-topo {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    align-items: baseline;
}

.pn-titulo { font-size: 0.84rem; font-weight: 600; }
.pn-quando { font-size: 0.68rem; color: var(--text-muted, #9ca3af); white-space: nowrap; }

.pn-msg {
    font-size: 0.76rem;
    color: var(--text-muted, #9ca3af);
    margin-top: 0.2rem;
    line-height: 1.4;
}

.pn-pedido {
    font-size: 0.68rem;
    color: var(--orange, #ff6a00);
    margin-top: 0.25rem;
    font-weight: 700;
}

@media (max-width: 640px) {
    .painel-notificacoes { width: 300px; right: -60px; }
}

/* ============================================================
   FASE A · Trechos da viagem (modal de alocação)
   ============================================================ */
.trechos-bloco { margin-top: .5rem; }
.trechos-cabecalho { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin-bottom:.6rem; flex-wrap:wrap; }
.trechos-titulo { font-weight:700; color:var(--orange-bright); font-size:.9rem; }
.trechos-ajuda { font-size:.74rem; color:var(--text-muted); }
.trecho-row { display:grid; grid-template-columns:26px 1.3fr 1.3fr 80px 110px 30px; gap:.5rem; align-items:end; padding:.65rem; border:1px solid var(--border-color); border-radius:8px; margin-bottom:.55rem; background:var(--black-elevated); }
.trecho-row .trecho-ordem { align-self:center; justify-self:center; width:26px; height:26px; border-radius:50%; background:var(--orange); color:var(--black-void); font-weight:800; font-size:.8rem; display:flex; align-items:center; justify-content:center; }
.trecho-row .fg { display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.trecho-row .fg label { font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); font-weight:600; }
.trecho-row .fg input, .trecho-row .fg select { background:var(--black-void); border:1px solid var(--border-color); border-radius:6px; color:var(--white); padding:.45rem .5rem; font-size:.88rem; outline:none; width:100%; }
.trecho-row .fg input:focus, .trecho-row .fg select:focus { border-color:var(--orange); }
.trecho-row .fg-valor input { color:#4ade80; font-weight:700; background:rgba(74,222,128,.06); border-color:rgba(74,222,128,.25); }
.trecho-row .btn-rm-trecho { align-self:center; width:28px; height:28px; border-radius:6px; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); color:#f87171; cursor:pointer; font-size:.9rem; line-height:1; }
.trecho-row .btn-rm-trecho:hover { background:rgba(239,68,68,.28); }
.trecho-row .btn-rm-trecho:disabled { opacity:.3; cursor:not-allowed; }
.btn-add-trecho { width:100%; margin-top:.2rem; background:transparent; border:1px dashed var(--orange-dim); color:var(--orange-bright); padding:.55rem 1rem; border-radius:8px; cursor:pointer; font-weight:600; transition:all .2s; }
.btn-add-trecho:hover { background:var(--orange-glow-soft); border-color:var(--orange); }
.trechos-rodape { margin-top:.7rem; display:flex; justify-content:space-between; align-items:center; padding:.6rem .9rem; border-radius:8px; background:var(--black-void); border:1px solid var(--border-color); }
.trechos-rodape .lbl { color:var(--text-light); font-size:.82rem; }
.trechos-rodape .val { font-weight:700; font-size:1rem; }
.trechos-rodape.ok .val { color:#4ade80; }
.trechos-rodape.warn .val { color:var(--danger-color); }
@media (max-width:640px) {
    .trecho-row { grid-template-columns:22px 1fr 1fr; }
    .trecho-row .btn-rm-trecho { justify-self:end; }
}

/* Botões do bloco de trechos (adicionar / calcular km) */
.trechos-botoes { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.2rem; }
.trechos-botoes .btn-add-trecho { flex:1 1 240px; margin-top:0; }
.btn-km-auto { flex:1 1 240px; background:var(--orange-glow-soft); border:1px solid var(--orange-dim); color:var(--orange-bright); padding:.55rem 1rem; border-radius:8px; cursor:pointer; font-weight:600; transition:all .2s; }
.btn-km-auto:hover { background:var(--orange); color:var(--black-void); border-color:var(--orange); }
.btn-km-auto:disabled { opacity:.6; cursor:progress; }

/* ============================================================
   FASE A · Trechos em CARTÃO (De → Até, encadeado) — v2 clareza
   ============================================================ */
.trecho-card { border:1px solid var(--border-color); border-radius:10px; background:var(--black-elevated); padding:.85rem .9rem; }
.trecho-card-topo { display:flex; align-items:center; gap:.6rem; margin-bottom:.7rem; }
.trecho-badge { background:var(--orange); color:var(--black-void); font-weight:800; font-size:.72rem; letter-spacing:.03em; padding:.22rem .6rem; border-radius:20px; text-transform:uppercase; }
.trecho-quem { font-size:.82rem; color:#4ade80; font-weight:600; }
.trecho-quem-vazio { color:var(--text-muted); font-weight:500; font-style:italic; }
.trecho-card-topo .btn-rm-trecho { margin-left:auto; width:26px; height:26px; border-radius:6px; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); color:#f87171; cursor:pointer; font-size:.85rem; line-height:1; }
.trecho-card-topo .btn-rm-trecho:hover { background:rgba(239,68,68,.28); }
.trecho-card-topo .btn-rm-trecho:disabled { opacity:.3; cursor:not-allowed; }

.trecho-percurso { display:grid; grid-template-columns:1fr 22px 1fr; gap:.55rem; align-items:end; margin-bottom:.7rem; }
.trecho-percurso .seta-percurso { align-self:center; text-align:center; color:var(--orange-bright); font-weight:800; font-size:1.1rem; padding-bottom:.4rem; }

.trecho-dados { display:grid; grid-template-columns:1fr 90px 130px; gap:.55rem; align-items:end; }

.trecho-card .fg { display:flex; flex-direction:column; gap:.28rem; min-width:0; }
.trecho-card .fg label { font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); font-weight:600; }
.trecho-card .fg input, .trecho-card .fg select { background:var(--black-void); border:1px solid var(--border-color); border-radius:6px; color:var(--white); padding:.5rem .55rem; font-size:.9rem; outline:none; width:100%; }
.trecho-card .fg input:focus, .trecho-card .fg select:focus { border-color:var(--orange); }
.trecho-card .fg-valor input { color:#4ade80; font-weight:700; background:rgba(74,222,128,.06); border-color:rgba(74,222,128,.25); }

/* Conector entre um trecho e o próximo (mostra que a carga continua) */
.trecho-conector { display:flex; align-items:center; gap:.5rem; margin:.15rem 0 .15rem 1rem; padding:.15rem 0; color:var(--text-muted); font-size:.74rem; }
.trecho-conector::before { content:"↓"; color:var(--orange-bright); font-weight:800; font-size:1rem; }
.trecho-conector span { font-style:italic; }

@media (max-width:640px) {
    .trecho-dados { grid-template-columns:1fr 1fr; }
    .trecho-dados .fg:first-child { grid-column:1 / -1; }
}

/* Botão "Editar trechos" no card do Kanban (tom laranja, alinhado ao tema) */
.btn-kanban-trechos {
    background: rgba(255, 106, 0, 0.12);
    border: 1px solid rgba(255, 106, 0, 0.4);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.78rem;
    padding: 0.2rem 0.45rem;
}
.btn-kanban-trechos:hover { background: rgba(255, 106, 0, 0.28); }

/* ============================================================
   #4 · Veículo extra no lote (cartão com endereço próprio)
   ============================================================ */
.veiculo-extra-row {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    padding: 0.85rem 0.9rem;
    margin-bottom: 0.7rem;
}
.veiculo-extra-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.veiculo-extra-num {
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--orange-bright);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.veiculo-extra-topo .btn-remover-veiculo {
    width: 26px; height: 26px;
    border-radius: 6px;
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.3);
    color: #f87171;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
}
.veiculo-extra-topo .btn-remover-veiculo:hover { background: rgba(239,68,68,0.28); }
.label-opcional {
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* ============================================================
   #1 · Linha de "Carga fechada" nas listas (tabelas)
   ============================================================ */
tr.grupo-header {
    cursor: pointer;
    background: linear-gradient(90deg, rgba(255,106,0,0.10), rgba(255,106,0,0.02));
    transition: background 0.15s ease;
}
tr.grupo-header:hover { background: rgba(255,106,0,0.16); }
tr.grupo-header td {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}
tr.grupo-header .grupo-toggle {
    display: inline-block;
    width: 1.1rem;
    color: var(--orange-bright);
    font-weight: 800;
}
.grupo-badge {
    font-weight: 700;
    color: var(--orange-bright);
    margin-right: 0.4rem;
}
tr.grupo-header .grupo-cliente { color: var(--text-dark); margin: 0 0.5rem; }
tr.grupo-header .grupo-rota { color: var(--text-muted); font-size: 0.8rem; }
tr.grupo-header .grupo-total {
    color: #4ade80;
    font-weight: 700;
    margin-left: 0.5rem;
}
tr.grupo-header .grupo-dica {
    float: right;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* #1/responsável · destaque do responsável comercial */
.grupo-resp {
    color: var(--orange-bright);
    font-weight: 600;
    margin: 0 0.5rem;
    font-size: 0.8rem;
}
.ocup-resp {
    color: var(--orange-bright);
    font-size: 0.72rem;
    font-weight: 600;
}

/* Botão "Avançar todos" no cabeçalho da carga fechada */
.grupo-avancar {
    background: var(--orange);
    color: var(--black-void);
    border: none;
    border-radius: 6px;
    padding: 0.25rem 0.7rem;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    margin-left: 0.6rem;
    transition: background 0.15s ease;
}
.grupo-avancar:hover { background: var(--orange-bright); }

/* Aviso dentro da janela de status quando é avanço em lote */
.lote-aviso {
    background: rgba(255,106,0,0.12);
    border: 1px solid rgba(255,106,0,0.4);
    color: var(--orange-bright);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

/* ============================================================
   Faturamento (Parte 2) — por motorista e por caminhão
   ============================================================ */
.fat-filtros { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: end; }
.fg-inline { display: flex; flex-direction: column; gap: 0.25rem; }
.fg-inline label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; }
.fat-total-geral {
    margin: 1rem 0 0.6rem; padding: 0.6rem 0.9rem;
    background: var(--black-void); border: 1px solid var(--border-color);
    border-radius: 8px; font-size: 0.95rem;
}
.fat-total-geral strong { color: #4ade80; }
.fat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.7rem; margin-bottom: 1rem; }
.fat-card { padding: 0.85rem 0.9rem; }
.fat-card-topo { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-weight: 600; }
.fat-card-topo strong { color: #4ade80; }
.fat-card-sub { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.3rem; }
.fat-card-linha { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 0.2rem 0; border-top: 1px solid var(--border-color); }
.fat-card-linha span:last-child { color: var(--text-light); font-weight: 600; }

/* Auditoria de faturamento (CTE x faturado) */
.audit-resumo { margin-bottom: 0.8rem; font-size: 0.95rem; color: var(--text-light); }
.audit-num-pend { color: var(--danger-color); font-weight: 800; font-size: 1.1rem; }
.audit-num-ok { color: #4ade80; font-weight: 800; font-size: 1.1rem; }
.audit-h { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 1rem 0 0.5rem; }
.audit-card { border: 1px solid var(--border-color); border-radius: 8px; padding: 0.7rem 0.85rem; margin-bottom: 0.55rem; }
.audit-card.audit-pend { border-left: 3px solid var(--danger-color); background: rgba(255,77,77,0.05); }
.audit-card.audit-ok { border-left: 3px solid #4ade80; opacity: 0.85; }
.audit-topo { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.audit-cegonha { font-weight: 700; }
.audit-doc { font-size: 0.72rem; color: var(--text-muted); }
.audit-tag-pend { margin-left: auto; font-size: 0.7rem; font-weight: 700; color: var(--danger-color); background: rgba(255,77,77,0.12); border: 1px solid rgba(255,77,77,0.3); padding: 0.12rem 0.5rem; border-radius: 20px; }
.audit-tag-ok { margin-left: auto; font-size: 0.72rem; font-weight: 600; color: #4ade80; }
.audit-info { font-size: 0.82rem; color: var(--text-light); margin-bottom: 0.5rem; }
.audit-zero { color: #4ade80; padding: 0.5rem 0; }

/* Auditoria: identificação (chips) e faturados minimizáveis */
.audit-data { font-size: 0.75rem; color: var(--text-muted); }
.audit-ident { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.15rem 0 0.4rem; }
.audit-chip { font-size: 0.76rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 20px; border: 1px solid var(--border-color); }
.audit-chip-cli { background: rgba(96,165,250,0.12); color: #60a5fa; border-color: rgba(96,165,250,0.3); }
.audit-chip-placa { background: rgba(255,255,255,0.04); color: var(--text-dark); }
.audit-chip-ref { background: rgba(255,106,0,0.12); color: var(--orange-bright); border-color: rgba(255,106,0,0.3); }
.audit-faturados-header {
    display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
    padding: 0.6rem 0.5rem; margin-top: 0.6rem; border-top: 1px solid var(--border-color);
    color: var(--text-light);
}
.audit-faturados-header:hover { color: var(--white); }
.audit-faturados-header .audit-count {
    background: rgba(74,222,128,0.15); color: #4ade80; font-weight: 700;
    padding: 0.05rem 0.5rem; border-radius: 20px; font-size: 0.78rem;
}

/* Chip do número do CTE (vínculo com o Mais Frete) */
.audit-chip-cte { background: rgba(74,222,128,0.15); color: #4ade80; border-color: rgba(74,222,128,0.4); font-weight: 700; }

/* Link do CTE para o Mais Frete (clicável) */
a.audit-chip-cte { text-decoration: none; cursor: pointer; transition: background 0.15s ease; }
a.audit-chip-cte:hover { background: rgba(74,222,128,0.28); }

/* Link do CTE (Mais Frete) no painel do fiscal */
.link-cte-maisfrete {
    display: inline-block; margin-top: 0.3rem;
    color: #4ade80; font-weight: 700; font-size: 0.75rem;
    text-decoration: none;
}
.link-cte-maisfrete:hover { text-decoration: underline; }

/* ============================================================
   #4 · Abas da Logística reorganizadas (grupos + hierarquia)
   ============================================================ */
.logistica-tabs-nova {
    position: relative;
    background: var(--black-panel);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 1.2rem;
}
.logistica-tabs-nova .log-atualizar { position: absolute; top: 0.8rem; right: 0.9rem; }
.log-grupo { margin-bottom: 0.9rem; }
.log-grupo:last-child { margin-bottom: 0; }
.log-grupo + .log-grupo { border-top: 1px solid var(--border-color); padding-top: 0.9rem; }
.log-grupo-rotulo {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--text-muted); font-weight: 700; margin-bottom: 0.5rem; padding-left: 0.15rem;
}
.log-grupo-abas { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.logistica-tabs-nova .log-tab-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--black-elevated); border: 1px solid var(--border-color);
    border-radius: 8px; padding: 0.55rem 0.9rem; font-size: 0.88rem;
    color: var(--text-light); cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.logistica-tabs-nova .log-tab-btn:hover { border-color: var(--text-light); color: var(--white); }
.logistica-tabs-nova .log-tab-btn.active { background: var(--orange); border-color: var(--orange); color: var(--black-void); font-weight: 700; }
/* Operação em destaque (uso diário) */
.log-grupo-operacao .log-tab-btn { background: #20140a; border-color: var(--orange-dim); }
.log-grupo-operacao .log-tab-btn:hover { border-color: var(--orange); color: var(--white); }
.log-grupo-operacao .log-tab-btn.active { background: var(--orange); border-color: var(--orange); color: var(--black-void); }
@media (max-width: 640px) {
    .logistica-tabs-nova .log-atualizar { position: static; display: block; margin-bottom: 0.8rem; }
}

/* #3 · Selo "aguardando" o outro setor (bate-volta visível) */
.selo-aguardando {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.74rem; font-weight: 600; padding: 0.22rem 0.6rem;
    border-radius: 20px; border: 1px solid transparent; white-space: nowrap;
}
.selo-aguardando-comercial { background: rgba(249,115,22,0.12); color: #fb923c; border-color: rgba(249,115,22,0.3); }
.selo-aguardando-logistica { background: rgba(96,165,250,0.12); color: #60a5fa; border-color: rgba(96,165,250,0.3); }

/* #1 · Botão sair do pátio (transbordo direto) */
.btn-sair-patio { background: rgba(255,106,0,0.15) !important; border-color: var(--orange-dim) !important; color: var(--orange-bright) !important; font-weight: 700; }
.btn-sair-patio:hover { background: var(--orange) !important; color: var(--black-void) !important; }

/* Busca na alocação */
.busca-alocacao {
    width: 100%; margin-bottom: 0.7rem;
    background: var(--black-void); border: 1px solid var(--border-color);
    border-radius: 8px; color: var(--white); padding: 0.6rem 0.8rem; font-size: 0.9rem; outline: none;
}
.busca-alocacao:focus { border-color: var(--orange); }
.busca-alocacao::placeholder { color: var(--text-muted); }

/* ============================================================
   Polimento estético · Financeiro e Fiscal (alinhado e espaçado)
   ============================================================ */
/* Filtros do faturamento: tudo na mesma linha de base e mesma altura */
#faturamento .fat-filtros { gap: 0.9rem 1rem; align-items: end; }
#faturamento .fat-filtros .filtro-select,
#faturamento .fat-filtros input[type="date"] { min-height: 40px; }
#faturamento .fat-filtros .btn { min-height: 40px; align-self: end; }
#faturamento .card { padding: 1.4rem 1.5rem; }
#faturamento .fat-cards { gap: 0.9rem; }
#faturamento .audit-card { padding: 0.85rem 1rem; }
#faturamento .painel-header-bar { margin-bottom: 0.3rem; gap: 0.6rem; }
#faturamento .table th, #faturamento .table td { vertical-align: middle; }

/* Painel do fiscal: células centralizadas e ações alinhadas */
#corpoTabelaFiscal td { vertical-align: middle; padding: 0.7rem 0.9rem; }
#fiscal .fiscal-acoes-td { align-items: center; }
#fiscal .selo-cte-ok, #fiscal .selo-cte-pend { margin-top: 0.35rem; }
#fiscal .link-cte-maisfrete { margin-top: 0.35rem; }
#fiscal .card, #fiscal .fiscal-card { padding: 1.4rem 1.5rem; }

/* ============================================================
   #2 · Selo de rota planejada na cegonha
   ============================================================ */
.rota-planejada-tag {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px;
    background: rgba(255,106,0,0.18); color: var(--orange-bright);
    font-size: 0.72rem; margin-right: 0.35rem; vertical-align: middle;
}

/* ============================================================
   #6 · Mini-painel de rotas na tela do comercial
   ============================================================ */
.rotas-comercial-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.85rem; margin-top: 0.5rem;
}
.rota-com-card {
    background: var(--black-elevated); border: 1px solid var(--border-color);
    border-radius: 10px; padding: 0.85rem 1rem; transition: border-color 0.15s;
}
.rota-com-card:hover { border-color: var(--orange-dim); }
.rota-com-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem; gap: 0.5rem; }
.rota-com-nome { font-weight: 700; color: var(--white); font-size: 0.92rem; }
.rota-com-selo {
    font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.55rem;
    border-radius: 20px; border: 1px solid transparent; white-space: nowrap;
}
.rota-com-vagas { background: rgba(74,222,128,0.12); color: #4ade80; border-color: rgba(74,222,128,0.35); }
.rota-com-cheia { background: rgba(255,77,77,0.10); color: #f87171; border-color: rgba(255,77,77,0.3); }
.rota-com-meta { font-size: 0.8rem; color: var(--text-light); margin-bottom: 0.5rem; }
.rota-com-cidades {
    font-size: 0.78rem; line-height: 1.7;
    padding: 0.4rem 0.5rem; background: rgba(255,255,255,0.02);
    border-radius: 6px; margin-bottom: 0.55rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    max-width: 100%; overflow: hidden;
}
.rota-com-cidades .rota-seta { margin: 0 !important; }
.rota-com-cidades .rota-ponto { white-space: normal; word-break: break-word; }
.rota-com-ocup { display: flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; color: var(--text-muted); }
.rota-com-barra { flex: 1; height: 6px; background: var(--black-void); border-radius: 3px; overflow: hidden; }
.rota-com-barra-inner { height: 100%; transition: width 0.3s ease; }

/* ============================================================
   #5 · Conferência de Receitas (financeiro)
   ============================================================ */
.rec-resumo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.7rem; margin: 0.6rem 0 1rem; }
.rec-rc { background: var(--black-elevated); border: 1px solid var(--border-color); border-left-width: 3px; border-radius: 8px; padding: 0.7rem 0.9rem; display: flex; flex-direction: column; gap: 0.15rem; }
.rec-rc-pend { border-left-color: #fbbf24; }
.rec-rc-atr { border-left-color: #ef4444; }
.rec-rc-conf { border-left-color: #4ade80; }
.rec-rc-num { font-size: 1.5rem; font-weight: 800; color: var(--white); line-height: 1; }
.rec-rc-lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; }
.rec-rc-val { font-size: 0.85rem; color: var(--text-light); font-weight: 600; margin-top: 0.15rem; }
.rec-selo { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.12rem 0.55rem; border-radius: 20px; }
.rec-selo-ok { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.35); }
.rec-selo-pend { background: rgba(251,191,36,0.12); color: #fbbf24; border: 1px solid rgba(251,191,36,0.35); }
.rec-selo-atr { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.4); font-weight: 700; }
tr.rec-linha-atrasada td { background: rgba(239,68,68,0.04); }

/* #2 · Selos numéricos nas sub-abas da logística */
.selo-log-pend {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    margin-left: 0.4rem;
    background: #ef4444; color: #fff;
    font-size: 0.7rem; font-weight: 800;
    border-radius: 12px; line-height: 1;
    box-shadow: 0 0 0 2px rgba(239,68,68,0.25);
}
.log-tab-btn.active .selo-log-pend { background: #fff; color: var(--orange); box-shadow: 0 0 0 2px rgba(255,255,255,0.4); }

/* #3 · Veículo em manutenção — vermelho no painel e bloqueado na alocação */
.cegonha-card.cegonha-manutencao {
    border: 1px solid rgba(239,68,68,0.5);
    box-shadow: 0 0 0 2px rgba(239,68,68,0.12) inset;
    background: linear-gradient(180deg, rgba(239,68,68,0.06), transparent 40%);
}
.cegonha-manut-selo {
    background: rgba(239,68,68,0.15);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.4);
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 0.55rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}
.cegonha-manut-ate {
    font-weight: 500;
    color: var(--text-light);
    font-size: 0.72rem;
}
/* Alocação: card do veículo e drop zone em manutenção */
.veiculo-drop-card.veiculo-drop-manutencao {
    border-color: rgba(239,68,68,0.5);
    background: linear-gradient(180deg, rgba(239,68,68,0.06), transparent 60%);
}
.veiculo-drop-manut-selo {
    background: rgba(239,68,68,0.15);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.4);
    border-radius: 6px;
    padding: 0.3rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.drop-zone.drop-zone-manutencao {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.4);
    color: #f87171;
    cursor: not-allowed;
}

/* #4 · Seletor Frota/Terceiro (modal de rota e alocação) */
.rota-tipo-selector { display: flex; gap: 0.4rem; margin-bottom: 0.3rem; }
.rota-tipo-btn {
    flex: 1; padding: 0.5rem 0.6rem;
    background: var(--black-elevated); border: 1px solid var(--border-color);
    border-radius: 8px; color: var(--text-light); font-size: 0.85rem;
    font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.rota-tipo-btn:hover { border-color: var(--text-light); color: var(--white); }
.rota-tipo-btn.active {
    background: rgba(255,106,0,0.15); border-color: var(--orange);
    color: var(--orange-bright);
}
#rotaCegonha { width: 100%; }

/* Coluna de filtros de cegonhas na alocação */
.alocacao-filtros-cegonhas {
    display: flex; flex-direction: column; gap: 0.5rem;
    margin-bottom: 0.7rem;
}
#buscaCegonhaAlocacao {
    background: var(--black-void); border: 1px solid var(--border-color);
    border-radius: 8px; color: var(--white);
    padding: 0.5rem 0.8rem; font-size: 0.85rem; outline: none; width: 100%;
}
#buscaCegonhaAlocacao:focus { border-color: var(--orange); }
#buscaCegonhaAlocacao::placeholder { color: var(--text-muted); }

/* ============================================================
   Passos numerados na gestão logística (didático)
   ============================================================ */
.log-passo-bolinha {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: #fb923c !important; color: #ffffff !important;
    font-size: 0.75rem; font-weight: 800;
    margin-right: 0.4rem; vertical-align: middle;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
html[data-tema="claro"] .log-passo,
[data-tema="claro"] .log-passo-bolinha { background: #fb923c !important; color: #ffffff !important; }
.log-grupo-rotulo { color: var(--text-primary, #e5e7eb); font-weight: 700; }
html[data-tema="claro"] .log-grupo-rotulo,
[data-tema="claro"] .log-grupo-rotulo { color: #1f2937 !important; }
.log-grupo-planejamento .log-tab-btn { background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.28); }
.log-grupo-planejamento .log-tab-btn:hover { border-color: #60a5fa; }
.log-grupo-planejamento .log-tab-btn.active { background: #3b82f6; border-color: #3b82f6; color: #fff; }

/* Dica visual pro motorista tirar foto boa da placa */
.dica-foto-placa {
    background: rgba(96,165,250,0.08);
    border: 1px solid rgba(96,165,250,0.3);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
}
.dica-foto-titulo {
    font-weight: 700; color: #60a5fa;
    font-size: 0.85rem; margin-bottom: 0.35rem;
}
.dica-foto-lista {
    margin: 0; padding-left: 1.1rem;
    font-size: 0.82rem; color: var(--text-light); line-height: 1.5;
}
.dica-foto-lista li { margin-bottom: 0.15rem; }

/* Selinho CTE emitido nos cards de pedido */
.selo-cte-pedido {
    display: inline-block;
    font-size: 0.7rem; font-weight: 700;
    padding: 0.1rem 0.5rem; border-radius: 20px;
    background: rgba(74,222,128,0.14); color: #4ade80;
    border: 1px solid rgba(74,222,128,0.4);
    margin-left: 0.35rem;
    vertical-align: middle;
    white-space: nowrap;
}

/* Selinhos de encaixe na rota planejada */
.selo-encaixe {
    display: inline-block;
    font-size: 0.7rem; font-weight: 700;
    padding: 0.1rem 0.5rem; border-radius: 20px;
    margin-left: 0.4rem; white-space: nowrap;
}
.selo-encaixe-ok { background: rgba(74,222,128,0.14); color: #4ade80; border: 1px solid rgba(74,222,128,0.4); }
.selo-encaixe-sai { background: rgba(96,165,250,0.14); color: #60a5fa; border: 1px solid rgba(96,165,250,0.4); }
.selo-encaixe-fora { background: rgba(251,191,36,0.14); color: #fbbf24; border: 1px solid rgba(251,191,36,0.4); }
.selo-encaixe-entra { background: rgba(167,139,250,0.16); color: #a78bfa; border: 1px solid rgba(167,139,250,0.45); }
.selo-encaixe-patio { background: rgba(96,165,250,0.18); color: #60a5fa; border: 1px solid rgba(96,165,250,0.5); }
.selo-encaixe-manual { background: rgba(236,72,153,0.16); color: #ec4899; border: 1px solid rgba(236,72,153,0.5); }

/* Aviso sobre CTE existente no modal Sair do pátio */
.aviso-cte-transbordo {
    background: rgba(74,222,128,0.08);
    border: 1px solid rgba(74,222,128,0.4);
    border-left-width: 3px;
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    margin-top: 0.7rem;
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.5;
}
.aviso-cte-transbordo strong { color: #4ade80; }

/* Aviso na linha do espelho fiscal (transbordo) */
.aviso-cte-transbordo-linha {
    display: inline-block;
    font-size: 0.7rem; font-weight: 700;
    color: #fbbf24; margin-top: 0.25rem;
}
/* ============================================================
   ESTILO DASHBOARD MODERNO — polimento final
   (fica no fim do arquivo para sobrescrever o antigo com naturalidade
    e usar os tokens novos)
   ============================================================ */

/* Cards com profundidade real (dashboard "vivo") */
.card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem 1.4rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.card:hover { box-shadow: var(--shadow-md); }

/* Cabeçalho da página com peso */
.app-header, header.app-header, .top-bar {
    background: var(--surface-1);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
}

/* Tabelas — cabeçalho com fundo sutil, linhas hover */
.table thead th, table thead th {
    background: var(--surface-2);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--border);
}
.table tbody tr, table tbody tr { transition: background 0.12s ease; }
.table tbody tr:hover, table tbody tr:hover { background: var(--accent-soft); }
.table tbody td, table tbody td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--border-soft);
}

/* Botões — peso maior, cursor claro */
.btn {
    padding: 0.55rem 1rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid var(--border);
    background: var(--surface-1);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: var(--shadow-xs);
}
.btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-inverse);
    font-weight: 700;
    box-shadow: var(--shadow-accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-secondary { background: var(--surface-2); }
.btn-sm { padding: 0.35rem 0.7rem; font-size: 0.78rem; }

/* KPI cards — a estrela do dashboard moderno */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.2rem;
}
.kpi-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 0.85rem 1.05rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kpi-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.kpi-card .kpi-num {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.kpi-card .kpi-num.kpi-verde { color: var(--success); }
.kpi-card .kpi-num.kpi-vermelho { color: var(--danger); }
.kpi-card .kpi-num.kpi-amarelo { color: var(--warning); }
.kpi-card .kpi-lbl {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-top: 0.25rem;
}
.kpi-card.kpi-success { border-left-color: var(--success); }
.kpi-card.kpi-danger { border-left-color: var(--danger); }
.kpi-card.kpi-warning { border-left-color: var(--warning); }
.kpi-card.kpi-info { border-left-color: var(--info); }

/* Selos padronizados (base semântica) */
.selo, .badge, .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* Cards de pedido / cegonha / rota — hover mais vivo */
.pedido-card, .cegonha-card, .rota-card {
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.pedido-card:hover, .cegonha-card:hover, .rota-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

/* Modais — mais profundidade */
.modal-content {
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}

/* Inputs e selects — bordas coerentes */
input[type="text"], input[type="email"], input[type="number"], input[type="date"],
input[type="datetime-local"], input[type="password"], select, textarea {
    background: var(--surface-1);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.75rem;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Sino / botão de tema no header */
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.btn-tema {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 36px; height: 36px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.15s ease;
}
.btn-tema:hover { background: var(--surface-3); color: var(--text-primary); }

/* ============================================================
   AJUSTES ESPECÍFICOS DO MODO CLARO
   Componentes que precisam de retoque (gradientes fortes, etc.)
   ============================================================ */
[data-tema="claro"] body {
    background-color: var(--surface-0);
    color: var(--text-primary);
}
[data-tema="claro"] body::before,
[data-tema="claro"] body::after {
    opacity: 0.3;
    filter: brightness(1.5);
}

/* No modo claro, o fundo blurado do login incomoda — suaviza */
[data-tema="claro"] .login-container::before,
[data-tema="claro"] .login-container::after {
    opacity: 0.4;
}

/* Tabelas no claro: linhas alternadas suaves pra facilitar leitura */
[data-tema="claro"] .table tbody tr:nth-child(even),
[data-tema="claro"] table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.015);
}
[data-tema="claro"] .table tbody tr:hover,
[data-tema="claro"] table tbody tr:hover { background: var(--accent-soft); }

/* Botões secundários no claro ficam mais visíveis com borda mais forte */
[data-tema="claro"] .btn { background: var(--surface-1); }
[data-tema="claro"] .btn:hover { background: var(--surface-2); }

/* Selos: força cor legível no claro (o alpha antigo era baixo demais) */
[data-tema="claro"] .selo-cte-pedido,
[data-tema="claro"] .selo-encaixe-ok,
[data-tema="claro"] .rec-selo-ok,
[data-tema="claro"] .audit-tag-ok { color: var(--success); }
[data-tema="claro"] .selo-encaixe-fora,
[data-tema="claro"] .rec-selo-pend { color: var(--warning); }
[data-tema="claro"] .rec-selo-atr,
[data-tema="claro"] .audit-tag-pend { color: var(--danger); }
[data-tema="claro"] .selo-encaixe-sai { color: var(--info); }

/* Text-muted no claro precisa de menos contraste inverso */
[data-tema="claro"] .text-muted { color: var(--text-tertiary); }
[data-tema="claro"] .text-light { color: var(--text-secondary); }

/* Modal no claro: overlay mais escuro pra destacar */
[data-tema="claro"] .modal { background: rgba(0, 0, 0, 0.4); }

/* Chip laranja fica muito claro no light — força tom sólido */
[data-tema="claro"] .grupo-badge,
[data-tema="claro"] .badge-carga-fechada,
[data-tema="claro"] .patio-qtd {
    background: var(--accent);
    color: white;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-sm);
}

/* ============================================================
   CORREÇÕES DO MODO CLARO (segunda passada — após feedback)
   ============================================================ */

/* 1. HEADER — no claro precisa ficar branco, não preto */
[data-tema="claro"] .header {
    background: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
/* Logo "MOVE" (parte escura) precisa virar escuro-sobre-claro */
[data-tema="claro"] .logo-texto,
[data-tema="claro"] .brand-nome,
[data-tema="claro"] .header .logo span:first-child { color: var(--text-primary) !important; }

/* Textos do header no claro */
[data-tema="claro"] .header,
[data-tema="claro"] .header-content,
[data-tema="claro"] .admin-vendo,
[data-tema="claro"] .header .text-muted,
[data-tema="claro"] .header span { color: var(--text-secondary); }

/* 2. KPI cards — barra colorida no TOPO estava gritante.
   Troca por borda lateral fina (padrão dashboard) e reduz peso. */
[data-tema="claro"] .stat-card,
[data-tema="claro"] .dashboard-card,
[data-tema="claro"] .resumo-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

/* Se algum card usa border-top colorido grosso, suaviza no claro */
[data-tema="claro"] [style*="border-top"] { border-top-width: 2px !important; }

/* 3. Abas de navegação (nav-btn) no claro */
[data-tema="claro"] .nav-btn {
    background: var(--surface-2);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
[data-tema="claro"] .nav-btn:hover { background: var(--surface-3); color: var(--text-primary); }
[data-tema="claro"] .nav-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* 4. Botões do topo (LOGÍSTICA, Admin, SAIR) legíveis no claro */
[data-tema="claro"] .btn-perfil,
[data-tema="claro"] .btn-admin-voltar,
[data-tema="claro"] .btn-sair {
    background: var(--surface-2);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

/* 5. Footer no claro */
[data-tema="claro"] footer,
[data-tema="claro"] .app-footer,
[data-tema="claro"] .rodape { color: var(--text-tertiary); }

/* 6. Botão de tema e sino no header claro */
[data-tema="claro"] .btn-sino { background: var(--surface-2); border: 1px solid var(--border); }
[data-tema="claro"] .btn-tema { background: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }

/* 7. Reduzir o gradiente de fundo forte da página no claro */
[data-tema="claro"] body {
    background-image: none !important;
    background-color: var(--surface-0) !important;
}

/* ============================================================
   BLINDAGEM DO MODO CLARO — terceira passada
   Força os elementos com cores hardcoded a respeitarem o tema.
   Estratégia: pega os padrões que quebram e reaponta pros tokens.
   ============================================================ */

/* --- Fundos escuros hardcoded viram superfície clara --- */
[data-tema="claro"] [style*="background: #1a1a20"],
[data-tema="claro"] [style*="background:#1a1a20"],
[data-tema="claro"] [style*="background: #1e1e24"],
[data-tema="claro"] [style*="background: #1e1e26"],
[data-tema="claro"] [style*="#15151b"] {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
}

/* --- Elementos-container que no dark são escuros --- */
[data-tema="claro"] .modal-content,
[data-tema="claro"] .painel-notificacoes,
[data-tema="claro"] .pn-lista,
[data-tema="claro"] .dropdown-menu,
[data-tema="claro"] .popover,
[data-tema="claro"] .tooltip-box,
[data-tema="claro"] .kanban-col,
[data-tema="claro"] .kanban-card,
[data-tema="claro"] .cegonha-card,
[data-tema="claro"] .rota-card,
[data-tema="claro"] .pedido-card,
[data-tema="claro"] .veiculo-drop-card,
[data-tema="claro"] .patio-card,
[data-tema="claro"] .fiscal-card,
[data-tema="claro"] .rec-rc,
[data-tema="claro"] .kpi-card,
[data-tema="claro"] .rota-com-card,
[data-tema="claro"] .stat-card,
[data-tema="claro"] .dashboard-card {
    background: var(--surface-1);
    color: var(--text-primary);
    border-color: var(--border);
}

/* --- Fundo mais fundo (drop zones, listas internas) --- */
[data-tema="claro"] .drop-zone,
[data-tema="claro"] .veiculo-pedidos-alocados,
[data-tema="claro"] .rota-com-cidades,
[data-tema="claro"] .pn-item,
[data-tema="claro"] .lista-paradas,
[data-tema="claro"] .pedido-alocado-mini {
    background: var(--surface-2);
    color: var(--text-primary);
}

/* --- Textos que eram branco fixo: herdam a cor certa --- */
[data-tema="claro"] .cegonha-placa,
[data-tema="claro"] .veiculo-placa,
[data-tema="claro"] .kanban-card-titulo,
[data-tema="claro"] .rota-com-nome,
[data-tema="claro"] .kpi-num,
[data-tema="claro"] .stat-numero,
[data-tema="claro"] .rec-rc-num,
[data-tema="claro"] h1, [data-tema="claro"] h2,
[data-tema="claro"] h3, [data-tema="claro"] h4 {
    color: var(--text-primary);
}

/* --- Qualquer texto branco puro inline vira escuro no claro --- */
[data-tema="claro"] [style*="color: #fff"],
[data-tema="claro"] [style*="color:#fff"],
[data-tema="claro"] [style*="color: #f5f4f1"],
[data-tema="claro"] [style*="color: white"] {
    color: var(--text-primary) !important;
}

/* --- Selos/pills com fundo translúcido claro precisam de texto sólido --- */
[data-tema="claro"] .pill,
[data-tema="claro"] .badge,
[data-tema="claro"] .selo,
[data-tema="claro"] .status-badge { color: var(--text-primary); }

/* --- Modais: título e labels --- */
[data-tema="claro"] .modal-content label,
[data-tema="claro"] .modal-content h2,
[data-tema="claro"] .modal-content h3,
[data-tema="claro"] .form-group label { color: var(--text-primary); }

/* --- Painel de notificações no claro --- */
[data-tema="claro"] .painel-notificacoes {
    background: var(--surface-1);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}
[data-tema="claro"] .pn-item { border-bottom: 1px solid var(--border-soft); }
[data-tema="claro"] .pn-item:hover { background: var(--surface-2); }

/* --- Kanban colunas no claro --- */
[data-tema="claro"] .kanban-col { background: var(--surface-2); }
[data-tema="claro"] .kanban-col-header { color: var(--text-primary); }

/* --- Inputs no claro (garante fundo branco e texto escuro) --- */
[data-tema="claro"] input,
[data-tema="claro"] select,
[data-tema="claro"] textarea {
    background: var(--surface-1);
    color: var(--text-primary);
    border-color: var(--border);
}
[data-tema="claro"] input::placeholder,
[data-tema="claro"] textarea::placeholder { color: var(--text-tertiary); }

/* --- Selects nativos: seta e opções no claro --- */
[data-tema="claro"] select option { background: var(--surface-1); color: var(--text-primary); }

/* --- Linhas de tabela: texto sempre legível --- */
[data-tema="claro"] table td,
[data-tema="claro"] table th,
[data-tema="claro"] .table td,
[data-tema="claro"] .table th { color: var(--text-primary); }
[data-tema="claro"] table thead th { color: var(--text-secondary); }

/* ============================================================
   CORREÇÕES — quarta passada (logo + vibração de cores no claro)
   ============================================================ */

/* LOGO: no claro, mix-blend-mode screen apaga a imagem (screen sobre
   branco = branco). Trocamos para multiply, que remove o fundo branco
   da PNG e mantém o desenho visível. */
[data-tema="claro"] .logo-img,
[data-tema="claro"] .login-logo-img {
    mix-blend-mode: multiply;
    filter: none;
}

/* Marca textual "MOVEMASTER" bem contrastada no claro */
[data-tema="claro"] .logo-brand,
[data-tema="claro"] .logo-text { color: var(--text-primary); }

/* CORES MAIS VIBRANTES NO CLARO
   O problema de "lavado" vem dos tokens de acento/estado terem alpha
   baixo. No claro, deixamos os acentos mais saturados e sólidos. */
[data-tema="claro"] {
    --accent: #f56000;
    --accent-hover: #d94e00;
    --accent-soft: rgba(245, 96, 0, 0.14);

    --success: #15a34a;
    --success-soft: rgba(21, 163, 74, 0.14);
    --warning: #e08600;
    --warning-soft: rgba(224, 134, 0, 0.14);
    --danger: #e02424;
    --danger-soft: rgba(224, 36, 36, 0.14);
    --info: #2563eb;
    --info-soft: rgba(37, 99, 235, 0.14);
}

/* KPI cards no claro: números grandes bem sólidos e vibrantes */
[data-tema="claro"] .kpi-num,
[data-tema="claro"] .stat-numero,
[data-tema="claro"] [class*="stat"] [class*="num"] { color: var(--text-primary); font-weight: 800; }
[data-tema="claro"] .kpi-verde, [data-tema="claro"] [style*="color: #4ade80"],
[data-tema="claro"] [style*="color:#4ade80"] { color: var(--success) !important; }
[data-tema="claro"] .kpi-vermelho { color: var(--danger) !important; }

/* Barra lateral colorida dos KPI mais viva no claro */
[data-tema="claro"] .kpi-card { border-left-width: 3px; }

/* Botões primários (laranja) — sólidos e vibrantes no claro, texto branco */
[data-tema="claro"] .btn-primary,
[data-tema="claro"] .nav-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(245, 96, 0, 0.25);
}
[data-tema="claro"] .btn-primary:hover { background: var(--accent-hover); }

/* Barrinhas do gráfico de faturamento (as bolinhas laranja) mais visíveis */
[data-tema="claro"] [class*="barra"] [class*="inner"],
[data-tema="claro"] .grafico-barra { background: var(--accent) !important; }

/* Selos verdes/laranja com texto sólido (não lavado) */
[data-tema="claro"] .selo-cte-pedido { color: var(--success); background: var(--success-soft); border-color: var(--success); }
[data-tema="claro"] .pill,
[data-tema="claro"] .badge-status { font-weight: 700; }

/* Caixa "Nenhum ponto de atenção" verde mais definida */
[data-tema="claro"] [class*="alerta"][class*="ok"],
[data-tema="claro"] [class*="sucesso"] {
    background: var(--success-soft);
    border-color: var(--success);
    color: var(--text-primary);
}

/* ============================================================
   CORREÇÕES — quinta passada (gradientes escuros no modo claro)
   Vários cards usam linear-gradient com cor escura hardcoded que
   não troca sozinha. Neutralizamos todos no claro.
   ============================================================ */
[data-tema="claro"] .ocup-resumo-card,
[data-tema="claro"] .resumo-card,
[data-tema="claro"] .patios-resumo-item,
[data-tema="claro"] .rota-card,
[data-tema="claro"] .dir-kpi,
[data-tema="claro"] .dica-instalar-pwa,
[data-tema="claro"] .stat-card,
[data-tema="claro"] .dashboard-card,
[data-tema="claro"] [class*="resumo-card"],
[data-tema="claro"] [class*="-kpi"] {
    background: var(--surface-1) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Os textos internos desses cards (labels e números) legíveis */
[data-tema="claro"] .ocup-resumo-card *,
[data-tema="claro"] .resumo-card *,
[data-tema="claro"] .dir-kpi *,
[data-tema="claro"] [class*="resumo-card"] * {
    color: inherit;
}
/* Label secundária (PEDIDOS HOJE, ESTA SEMANA...) em tom médio */
[data-tema="claro"] .resumo-card .resumo-label,
[data-tema="claro"] .resumo-card [class*="label"],
[data-tema="claro"] .ocup-resumo-card [class*="label"],
[data-tema="claro"] .dir-kpi [class*="label"] {
    color: var(--text-secondary) !important;
}
/* Número grande sempre forte */
[data-tema="claro"] .resumo-card [class*="num"],
[data-tema="claro"] .resumo-card [class*="valor"],
[data-tema="claro"] .ocup-resumo-card [class*="num"],
[data-tema="claro"] .dir-kpi [class*="num"] {
    color: var(--text-primary) !important;
    font-weight: 800;
}

/* A barrinha colorida do topo continua (é o acento do card), só garante
   que não vire cinza */
[data-tema="claro"] .resumo-card::before { opacity: 1; }

/* Botões de aba do topo (LANÇAMENTO, ORÇAMENTO, CADASTROS) no claro:
   fundo claro, texto escuro, e o ativo laranja */
[data-tema="claro"] .nav-btn {
    background: var(--surface-1);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}
[data-tema="claro"] .nav-btn:hover { background: var(--surface-2); color: var(--text-primary); }
[data-tema="claro"] .nav-btn.active {
    background: var(--accent);
    color: #fff !important;
    border-color: var(--accent);
}
[data-tema="claro"] .nav-btn.active * { color: #fff !important; }

/* ============================================================
   TELA DE LOGIN — sempre no visual ESCURO original
   (o modo claro não deve afetar login/nova-senha/sem-permissão)
   Reaplica os tokens escuros só dentro dessas telas + desfaz
   os overrides de logo e inputs que vieram do modo claro.
   ============================================================ */
/* A tela de login/acesso deve ficar SEMPRE escura (foto nítida), mesmo no modo claro.
   Sem isso, o brightness(1.5) do body no modo claro lavava a foto de fundo. */
[data-tema="claro"] .login-overlay {
    background:
        linear-gradient(rgba(5,5,7,0.62), rgba(5,5,7,0.70)),
        var(--hero-image, none) !important;
    background-size: cover, cover !important;
    background-position: center, center !important;
}

[data-tema="claro"] .login-overlay {
    --surface-0: #0a0a0c;
    --surface-1: #14141a;
    --surface-2: #1c1c22;
    --surface-3: #26262e;
    --border-soft: #23232a;
    --border: #2e2e36;
    --border-strong: #3a3a44;
    --text-primary: #f0f0f2;
    --text-secondary: #a5a5ac;
    --text-tertiary: #6a6a72;
    --accent-soft: rgba(255,106,0,0.12);
}

/* Logo do login volta ao blend do escuro (screen remove o preto da PNG) */
[data-tema="claro"] .login-overlay .login-logo-img,
[data-tema="claro"] .login-overlay .logo-img {
    mix-blend-mode: screen !important;
    filter: drop-shadow(0 0 10px rgba(255,106,0,0.5)) !important;
}

/* Marca textual do login volta ao claro-sobre-escuro */
[data-tema="claro"] .login-overlay .logo-brand,
[data-tema="claro"] .login-overlay .logo-text,
[data-tema="claro"] .login-overlay h1,
[data-tema="claro"] .login-overlay h2 { color: #f0f0f2 !important; }

/* Inputs do login voltam ao fundo escuro (não branco gritante) */
[data-tema="claro"] .login-overlay input,
[data-tema="claro"] .login-overlay select {
    background: #1c1c22 !important;
    color: #f0f0f2 !important;
    border: 1px solid #2e2e36 !important;
}
[data-tema="claro"] .login-overlay input::placeholder { color: #6a6a72 !important; }

/* Card e textos auxiliares do login */
[data-tema="claro"] .login-overlay .login-card { background: #14141a !important; color: #f0f0f2 !important; }
[data-tema="claro"] .login-overlay label,
[data-tema="claro"] .login-overlay .text-muted,
[data-tema="claro"] .login-overlay a { color: #a5a5ac !important; }

/* ============================================================
   CORREÇÃO — cards .dash-card do "Meu resumo" no modo claro
   (a classe real era .dash-card, com gradiente escuro fixo)
   ============================================================ */
[data-tema="claro"] .dash-card {
    background: var(--surface-1) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
}
[data-tema="claro"] .dash-valor { color: var(--text-primary) !important; font-weight: 800; }
[data-tema="claro"] .dash-label { color: var(--text-secondary) !important; }
[data-tema="claro"] .dash-card:hover { border-color: var(--accent) !important; }

/* Mesma proteção para qualquer outro card com gradiente rgba(20,20,26) fixo */
[data-tema="claro"] [style*="rgba(20,20,26"],
[data-tema="claro"] [style*="rgba(20, 20, 26"] {
    background: var(--surface-1) !important;
    color: var(--text-primary) !important;
}

/* ============================================================
   CORREÇÃO GERAL — sexta passada (todos os cards escuros fixos)
   Classes com cor escura hardcoded que resistiram ao modo claro.
   ============================================================ */

/* 1. Abas do grupo "Alocar & Acompanhar" (fundo #20140a fixo) */
[data-tema="claro"] .log-grupo-operacao .log-tab-btn {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}
[data-tema="claro"] .log-grupo-operacao .log-tab-btn:hover {
    border-color: var(--accent) !important;
    color: var(--text-primary) !important;
}
[data-tema="claro"] .log-grupo-operacao .log-tab-btn.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}
/* Todas as log-tab-btn legíveis no claro */
[data-tema="claro"] .log-tab-btn {
    background: var(--surface-1);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
[data-tema="claro"] .log-tab-btn.active { color: #fff; }

/* 2. Listas de pedidos e cegonhas (o container cinza da imagem 2) */
[data-tema="claro"] .pedidos-drag-list,
[data-tema="claro"] .veiculos-drop-list,
[data-tema="claro"] .logistica-col {
    background: transparent !important;
    color: var(--text-primary);
}

/* 3. Cards de veículo e cegonha (fundo rgba escuro fixo) */
[data-tema="claro"] .veiculo-drop-card,
[data-tema="claro"] .cegonha-card {
    background: var(--surface-1) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}
[data-tema="claro"] .veiculo-drop-card:hover,
[data-tema="claro"] .cegonha-card:hover { border-color: var(--accent) !important; }

/* Textos internos dos cards de cegonha/veículo legíveis */
[data-tema="claro"] .cegonha-card *,
[data-tema="claro"] .veiculo-drop-card * { color: inherit; }
[data-tema="claro"] .cegonha-placa,
[data-tema="claro"] .veiculo-placa { color: var(--text-primary) !important; font-weight: 700; }
[data-tema="claro"] .cegonha-tipo,
[data-tema="claro"] .veiculo-tipo,
[data-tema="claro"] .motorista-nome { color: var(--text-secondary) !important; }

/* Barra de rota dentro da cegonha (visão das vagas do dark) */
[data-tema="claro"] .cegonha-rota,
[data-tema="claro"] .veiculo-pedidos-alocados {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}
[data-tema="claro"] .cegonha-rota-linha,
[data-tema="claro"] .cegonha-rota-titulo { color: var(--text-secondary) !important; }

/* 4. Drop zone (arraste aqui) */
[data-tema="claro"] .drop-zone {
    background: var(--surface-2);
    border: 2px dashed var(--border-strong);
    color: var(--text-tertiary);
}

/* 5. Pátios (estava apagado) */
[data-tema="claro"] .patio-card,
[data-tema="claro"] .patio-card-vazio {
    background: var(--surface-1) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm);
}
[data-tema="claro"] .patio-card *,
[data-tema="claro"] .patio-card-vazio * { color: inherit; }
[data-tema="claro"] .patio-nome,
[data-tema="claro"] .patio-card h3,
[data-tema="claro"] .patio-card h4 { color: var(--text-primary) !important; font-weight: 700; }
[data-tema="claro"] .patio-vazio-texto,
[data-tema="claro"] [class*="patio"] [class*="vazio"] { color: var(--text-tertiary) !important; }

/* 6. Frota / Terceiros com rota (botões do filtro na alocação) */
[data-tema="claro"] .rota-tipo-btn {
    background: var(--surface-1);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
[data-tema="claro"] .rota-tipo-btn.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

/* 7. Terceiros: cards no painel */
[data-tema="claro"] #painelTerceiros .cegonha-card {
    background: var(--surface-1) !important;
    color: var(--text-primary) !important;
}

/* Empty states (Nenhum pedido / Nenhuma cegonha) legíveis */
[data-tema="claro"] .pedidos-drag-list .text-muted,
[data-tema="claro"] .veiculos-drop-list .text-muted,
[data-tema="claro"] .empty-state { color: var(--text-secondary) !important; }

/* ============================================================
   CORREÇÃO — Pátios no modo claro (estava apagado)
   Causa: .patio-card-vazio tinha opacity 0.65 (fica lavado no claro)
   ============================================================ */
[data-tema="claro"] .patio-card {
    background: var(--surface-1) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm);
}
[data-tema="claro"] .patio-card-vazio {
    opacity: 1 !important;              /* remove o "apagado" */
    border-color: var(--border) !important;
    background: var(--surface-1) !important;
}
[data-tema="claro"] .patio-header {
    border-bottom: 1px solid var(--border) !important;
}
[data-tema="claro"] .patio-nome {
    color: var(--text-primary) !important;
    font-weight: 700;
}
[data-tema="claro"] .patio-vazio {
    color: var(--text-tertiary) !important;
}
[data-tema="claro"] .patio-card-vazio .patio-qtd {
    color: var(--accent) !important;
    background: var(--accent-soft) !important;
    border: 1px solid var(--accent) !important;
}
[data-tema="claro"] .carro-patio-card {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

/* ============================================================
   REPAGINAÇÃO FINAL DO MODO CLARO — cinza suave, sem pretos
   Varredura ampla: qualquer container comum que ainda tenha
   fundo escuro passa a usar os tokens de superfície.
   ============================================================ */

/* Fundo geral e topo mais aparente */
[data-tema="claro"] body { background: var(--surface-0) !important; }
[data-tema="claro"] .header {
    background: var(--surface-3) !important;       /* topo cinza mais aparente */
    border-bottom: 1px solid var(--border-strong) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Containers e cards genéricos: cinza clarinho, nunca preto */
[data-tema="claro"] .card,
[data-tema="claro"] .panel,
[data-tema="claro"] .box,
[data-tema="claro"] .secao,
[data-tema="claro"] .bloco,
[data-tema="claro"] .container-card,
[data-tema="claro"] section > div,
[data-tema="claro"] .modal-content,
[data-tema="claro"] .tab-content > div {
    background-color: var(--surface-1);
    color: var(--text-primary);
}

/* TODOS os cards que eu havia forçado pra branco agora usam surface-1 (cinza clarinho) */
[data-tema="claro"] .dash-card,
[data-tema="claro"] .cegonha-card,
[data-tema="claro"] .veiculo-drop-card,
[data-tema="claro"] .patio-card,
[data-tema="claro"] .patio-card-vazio,
[data-tema="claro"] .rota-card,
[data-tema="claro"] .rota-com-card,
[data-tema="claro"] .kpi-card,
[data-tema="claro"] .rec-rc,
[data-tema="claro"] .ocup-resumo-card,
[data-tema="claro"] .resumo-card,
[data-tema="claro"] .dir-kpi,
[data-tema="claro"] .stat-card,
[data-tema="claro"] .fiscal-card {
    background: var(--surface-1) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

/* Elementos internos (drop zones, listas) um tom acima do card */
[data-tema="claro"] .drop-zone,
[data-tema="claro"] .veiculo-pedidos-alocados,
[data-tema="claro"] .cegonha-rota,
[data-tema="claro"] .carro-patio-card,
[data-tema="claro"] .rota-com-cidades,
[data-tema="claro"] .pedido-alocado-mini,
[data-tema="claro"] .lista-paradas {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

/* Varredura de qualquer fundo escuro inline restante */
[data-tema="claro"] [style*="background: #14141a"],
[data-tema="claro"] [style*="background:#14141a"],
[data-tema="claro"] [style*="background: #1a1"],
[data-tema="claro"] [style*="background: #0"],
[data-tema="claro"] [style*="background: #1"],
[data-tema="claro"] [style*="background: #20140a"],
[data-tema="claro"] [style*="rgba(18,18"],
[data-tema="claro"] [style*="rgba(20,20"],
[data-tema="claro"] [style*="rgba(25,25"] {
    background: var(--surface-1) !important;
    color: var(--text-primary) !important;
}

/* Tabelas: cabeçalho cinza aparente, corpo clarinho */
[data-tema="claro"] table thead th,
[data-tema="claro"] .table thead th {
    background: var(--surface-2) !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border) !important;
}
[data-tema="claro"] table tbody td,
[data-tema="claro"] .table tbody td {
    background: transparent;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-soft) !important;
}
[data-tema="claro"] table tbody tr:nth-child(even) td { background: rgba(0,0,0,0.015); }

/* Modais no claro: cinza clarinho, título laranja preservado */
[data-tema="claro"] .modal-content {
    background: var(--surface-1) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

/* Painel de notificações */
[data-tema="claro"] .painel-notificacoes,
[data-tema="claro"] .pn-lista { background: var(--surface-1) !important; }
[data-tema="claro"] .pn-item { background: var(--surface-1) !important; border-bottom: 1px solid var(--border-soft) !important; }
[data-tema="claro"] .pn-item:hover { background: var(--surface-2) !important; }

/* Kanban */
[data-tema="claro"] .kanban-col { background: var(--surface-2) !important; }
[data-tema="claro"] .kanban-card { background: var(--surface-1) !important; border: 1px solid var(--border) !important; }

/* Rodapé */
[data-tema="claro"] footer, [data-tema="claro"] .rodape { background: var(--surface-0); color: var(--text-tertiary); }

/* Garante que nenhum texto fique preto-sobre-escuro herdado */
[data-tema="claro"] .card *,
[data-tema="claro"] .dash-card *,
[data-tema="claro"] .cegonha-card *,
[data-tema="claro"] .patio-card *,
[data-tema="claro"] .modal-content * { border-color: var(--border); }

/* ============================================================
   CORREÇÕES — sétima passada (caixa no número + filtros pretos)
   ============================================================ */

/* IMG1: minha regra anterior ".dir-kpi *{border-color}" desenhou uma
   caixa em volta do número. Remove qualquer borda dos filhos do KPI. */
[data-tema="claro"] .dir-kpi *,
[data-tema="claro"] .kpi-card *,
[data-tema="claro"] .dash-card *,
[data-tema="claro"] .resumo-card *,
[data-tema="claro"] .ocup-resumo-card * {
    border: none !important;
    background: transparent !important;
}
/* Mas o próprio card mantém sua borda e fundo */
[data-tema="claro"] .dir-kpi,
[data-tema="claro"] .kpi-card,
[data-tema="claro"] .dash-card,
[data-tema="claro"] .resumo-card,
[data-tema="claro"] .ocup-resumo-card {
    border: 1px solid var(--border) !important;
    background: var(--surface-1) !important;
}
/* Rótulo e número com cor certa */
[data-tema="claro"] .dir-kpi-rot { color: var(--text-secondary) !important; }
[data-tema="claro"] .dir-kpi-num { color: var(--text-primary) !important; }
[data-tema="claro"] .dir-kpi-obs { color: var(--text-tertiary) !important; }

/* IMG2: barra de filtros com fundo escuro (container filter-section) */
[data-tema="claro"] .filter-section,
[data-tema="claro"] .fat-filtros,
[data-tema="claro"] .filtros-container,
[data-tema="claro"] .barra-filtros {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}
[data-tema="claro"] .filter-section label,
[data-tema="claro"] .fat-filtros label,
[data-tema="claro"] .fg-inline label { color: var(--text-secondary) !important; }

/* Total geral do faturamento (tinha fundo --black-void) */
[data-tema="claro"] .fat-total-geral {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

/* ============================================================
   CORREÇÃO FINAL — oitava passada
   1. --bg-card já resolvido nos tokens (barra de filtros troca sozinha)
   2. Retângulo em volta do número: limpar fundo dos filhos do dir-kpi
   3. Repaginar visão geral da diretoria no cinza
   ============================================================ */

/* Barra de filtros do acompanhamento (usava --bg-card, agora troca) */
[data-tema="claro"] .acomp-filtros {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
}
[data-tema="claro"] .acomp-filtro label { color: var(--text-secondary) !important; }

/* VISÃO GERAL DIRETORIA — design limpo no cinza */
[data-tema="claro"] .dir-kpi {
    background: var(--surface-1) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.25rem;
}
/* O número e textos NÃO têm fundo nem borda (tira o retângulo) */
[data-tema="claro"] .dir-kpi-num,
[data-tema="claro"] .dir-kpi-rot,
[data-tema="claro"] .dir-kpi-obs {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
[data-tema="claro"] .dir-kpi-num { color: var(--text-primary) !important; }
[data-tema="claro"] .dir-kpi-rot { color: var(--text-secondary) !important; }
[data-tema="claro"] .dir-kpi-obs { color: var(--text-tertiary) !important; }

/* Blocos das colunas da diretoria (Faturamento 6 meses, Ocupação, etc.) */
[data-tema="claro"] .dir-bloco,
[data-tema="claro"] .dir-coluna {
    background: var(--surface-1) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm);
}
[data-tema="claro"] .dir-bloco *,
[data-tema="claro"] .dir-coluna * { background: transparent !important; }
[data-tema="claro"] .dir-bloco h3,
[data-tema="claro"] .dir-bloco h4 { color: var(--text-primary) !important; }

/* Alerta verde "Nenhum ponto de atenção" no cinza */
[data-tema="claro"] .dir-alerta-ok,
[data-tema="claro"] [class*="alerta"][class*="ok"],
[data-tema="claro"] .alerta-sucesso {
    background: var(--success-soft) !important;
    border: 1px solid var(--success) !important;
    color: var(--text-primary) !important;
}

/* REGRA-CHAVE que estava faltando: qualquer coisa usando o fallback
   escuro #1a1d24 troca no claro (pega elementos que não achei) */
[data-tema="claro"] [style*="#1a1d24"],
[data-tema="claro"] [class][style*="1a1d24"] {
    background: var(--surface-1) !important;
    color: var(--text-primary) !important;
}

/* ============================================================
   Acompanhamento — busca em destaque + filtros discretos
   ============================================================ */
.acomp-busca-linha {
    display: flex; align-items: center; gap: 0.8rem;
    margin-bottom: 0.7rem;
}
.acomp-busca {
    flex: 1;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.acomp-busca:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.acomp-busca::placeholder { color: var(--text-tertiary); }
.acomp-contador {
    font-size: 0.82rem; font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
    padding: 0.35rem 0.7rem;
    background: var(--surface-2);
    border-radius: 20px;
}

/* Filtros recolhíveis (discretos, só abre quando precisa) */
.acomp-filtros-box {
    margin-bottom: 0.9rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-1);
    overflow: hidden;
}
.acomp-filtros-box summary {
    cursor: pointer;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    user-select: none;
    list-style: none;
}
.acomp-filtros-box summary::-webkit-details-marker { display: none; }
.acomp-filtros-box summary:hover { color: var(--text-primary); }
.acomp-filtros-box[open] summary { border-bottom: 1px solid var(--border); }
.acomp-filtros-box .acomp-filtros {
    margin: 0; padding: 0.9rem 1rem;
    background: transparent; border: none;
}

/* Tabela do acompanhamento com hierarquia (menos poluição) */
#tabelaAcompanhamento td { vertical-align: middle; }
#tabelaAcompanhamento tbody tr { transition: background 0.12s; }

/* Setinha dos filtros do acompanhamento (gira ao abrir) */
.acomp-filtros-box summary { display: flex; align-items: center; gap: 0.3rem; }
.acomp-filtros-box[open] summary { color: var(--accent); }

/* ============================================================
   VARREDURA DEFINITIVA — modo cinza (todos os fundos escuros
   fixos das telas de operação). Lista obtida por scan do CSS.
   ============================================================ */
[data-tema="claro"] .header { background: var(--surface-3) !important; }
[data-tema="claro"] .card { background: var(--surface-1) !important; }
[data-tema="claro"] .painel-card { background: var(--surface-1) !important; }
[data-tema="claro"] .pedido-drag-card { background: var(--surface-1) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; }
[data-tema="claro"] .veiculo-drop-card { background: var(--surface-1) !important; color: var(--text-primary) !important; }
[data-tema="claro"] .kanban-col-body { background: var(--surface-2) !important; }
[data-tema="claro"] .kanban-card { background: var(--surface-1) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; }
[data-tema="claro"] .notificacao-coleta { background: var(--surface-1) !important; color: var(--text-primary) !important; }
[data-tema="claro"] .lista-clientes-dropdown,
[data-tema="claro"] .custom-select-dropdown { background: var(--surface-1) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; }
[data-tema="claro"] .rota-card { background: var(--surface-1) !important; color: var(--text-primary) !important; }
[data-tema="claro"] .cegonha-card { background: var(--surface-1) !important; color: var(--text-primary) !important; }
[data-tema="claro"] .foto-card { background: var(--surface-1) !important; color: var(--text-primary) !important; }
[data-tema="claro"] .dash-card { background: var(--surface-1) !important; }
[data-tema="claro"] .input-moeda-wrap { background: var(--surface-2) !important; }
[data-tema="claro"] .pedido-drag-card:hover,
[data-tema="claro"] .veiculo-drop-card:hover,
[data-tema="claro"] .kanban-card:hover { border-color: var(--accent) !important; }

/* Itens internos desses cards não podem ter fundo escuro próprio */
[data-tema="claro"] .pedido-drag-card [style*="rgba(15,15,18"],
[data-tema="claro"] .veiculo-drop-card [style*="rgba(15,15,18"],
[data-tema="claro"] [style*="rgba(15,15,18"],
[data-tema="claro"] [style*="rgba(12,12,16"],
[data-tema="claro"] [style*="rgba(28,28,34"],
[data-tema="claro"] [style*="rgba(25,25,30"],
[data-tema="claro"] [style*="rgba(30,30,36"],
[data-tema="claro"] [style*="rgba(20,20,26"],
[data-tema="claro"] [style*="rgba(18,18,24"],
[data-tema="claro"] [style*="#1a1a20"],
[data-tema="claro"] [style*="#16161e"] {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
}

/* Textos internos legíveis nesses cards */
[data-tema="claro"] .pedido-drag-card *,
[data-tema="claro"] .veiculo-drop-card *,
[data-tema="claro"] .kanban-card *,
[data-tema="claro"] .rota-card *,
[data-tema="claro"] .cegonha-card *,
[data-tema="claro"] .notificacao-coleta * {
    color: inherit;
}
[data-tema="claro"] .pedido-drag-card .pedido-drag-titulo,
[data-tema="claro"] .veiculo-drop-card .veiculo-placa,
[data-tema="claro"] .kanban-card strong,
[data-tema="claro"] .cegonha-placa { color: var(--text-primary) !important; }

/* Header e login continuam como já definidos (login intocado) */
[data-tema="claro"] .login-overlay .login-card { background: linear-gradient(160deg, #1a1a1f, #121216) !important; }

/* ============================================================
   Diretoria — Rotas mais rentáveis com rota inteira descrita
   ============================================================ */
.dir-rota-item {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-soft);
}
.dir-rota-item:last-child { border-bottom: none; }
.dir-rota-topo {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.dir-rota-pos {
    font-size: 0.75rem; font-weight: 800;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 5px; padding: 0.1rem 0.4rem;
    flex-shrink: 0;
}
.dir-rota-nome {
    flex: 1;
    font-size: 0.88rem; font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    /* rota inteira aparente, sem cortar */
    white-space: normal;
    word-break: break-word;
}
.dir-rota-val {
    font-size: 0.85rem; font-weight: 800;
    color: var(--success);
    white-space: nowrap;
    flex-shrink: 0;
}
.dir-rota-barra-trilho {
    position: relative;
    height: 16px;
    background: var(--surface-2);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.dir-rota-barra {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
    border-radius: 8px;
    min-width: 2%;
}
.dir-rota-carros {
    position: relative;
    z-index: 1;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-primary);
    padding-left: 0.5rem;
}
/* ============================================================
   LOTE 2 — MANUTENÇÃO: checklist + tags de integridade
   ============================================================ */
.manut-toolbar {
    display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.manut-toolbar-campo { display: flex; flex-direction: column; gap: 6px; min-width: 280px; }
.manut-toolbar-campo label { font-size: .85rem; opacity: .8; }
.manut-toolbar-campo select {
    padding: 10px 12px; border-radius: 10px;
    background: rgba(255,255,255,.04); color: inherit;
    border: 1px solid rgba(255,255,255,.12);
}
.manut-tag-atual { display: flex; align-items: center; gap: 8px; font-size: .9rem; opacity: .9; }

.checklist-bloco {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
}
.checklist-bloco h4 { margin: 0 0 10px; font-size: .95rem; opacity: .95; }
.checklist-linha {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06);
    flex-wrap: wrap;
}
.checklist-linha:first-of-type { border-top: none; }
.checklist-item-nome { font-size: .92rem; }
.checklist-opcoes { display: flex; gap: 8px; flex-wrap: wrap; }
.checklist-opcoes .opt {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.14); font-size: .85rem; user-select: none;
}
.checklist-opcoes .opt input { accent-color: currentColor; }
.checklist-opcoes .opt-ok:has(input:checked) { background: rgba(74,222,128,.18); color:#4ade80; border-color: rgba(74,222,128,.4); }
.checklist-opcoes .opt-at:has(input:checked) { background: rgba(251,191,36,.18); color:#fbbf24; border-color: rgba(251,191,36,.4); }
.checklist-opcoes .opt-cr:has(input:checked) { background: rgba(248,113,113,.18); color:#f87171; border-color: rgba(248,113,113,.4); }

.manut-acoes { margin: 6px 0 18px; }
.manut-historico h3 { font-size: 1rem; margin: 18px 0 10px; }
.checklist-hist-linha {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.03);
    margin-bottom: 6px; font-size: .88rem;
}

/* Tags de integridade (item 13.7) — distintas das tags de ETA (item 16) */
.tag-integridade {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600;
    white-space: nowrap;
}
.tag-integridade.tag-verde    { background: rgba(74,222,128,.16);  color:#4ade80; border:1px solid rgba(74,222,128,.35); }
.tag-integridade.tag-amarelo  { background: rgba(251,191,36,.16);  color:#fbbf24; border:1px solid rgba(251,191,36,.35); }
.tag-integridade.tag-vermelho { background: rgba(248,113,113,.16); color:#f87171; border:1px solid rgba(248,113,113,.35); }

/* ============================================================
   LOTE 3 — EPIs: avaliação, fila de compras, autosserviço
   ============================================================ */
.manut-epi { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.manut-epi h3 { font-size: 1rem; margin: 0 0 12px; }
.epi-linha-dir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.epi-tamanho {
    padding: 6px 10px; border-radius: 8px; font-size: .84rem; min-width: 180px;
    background: rgba(255,255,255,.04); color: inherit; border: 1px solid rgba(255,255,255,.12);
}

.tabela-epi { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabela-epi th, .tabela-epi td {
    text-align: left; padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.tabela-epi th { font-weight: 600; opacity: .8; }
.epi-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.epi-urg-alta { color: #f87171; font-weight: 600; }

.epi-motorista-form { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.epi-motorista-form .manut-toolbar-campo { min-width: 200px; }
.epi-motorista-form input, .epi-motorista-form select {
    padding: 10px 12px; border-radius: 10px;
    background: rgba(255,255,255,.04); color: inherit; border: 1px solid rgba(255,255,255,.12);
}

/* ============================================================
   LOTE 4 — Agendamento de manutenção
   ============================================================ */
.manut-agendamento { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.manut-agendamento h3 { font-size: 1rem; margin: 0 0 12px; }
.manut-agendamento input[type="datetime-local"] { color-scheme: dark; }

/* ============================================================
   LOTE 5 — Parada de emergência
   ============================================================ */
.manut-emergencia { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.manut-emergencia h3 { font-size: 1rem; margin: 0 0 4px; }
.btn-danger { background: #dc2626; color: #fff; border: 1px solid #b91c1c; }
.btn-danger:hover { background: #b91c1c; }
.manut-emergencia input[type="datetime-local"] { color-scheme: dark; }

.emergencia-linha {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;
    background: rgba(220,38,38,.10); border: 1px solid rgba(220,38,38,.30); font-size: .88rem;
}
.emergencia-badge { font-weight: 700; color: #f87171; white-space: nowrap; }

.emergencia-banner {
    margin: 10px 0 14px; padding: 12px 14px; border-radius: 12px;
    background: rgba(220,38,38,.12); border: 1px solid rgba(220,38,38,.4);
}
.emergencia-banner-titulo { font-weight: 700; color: #fca5a5; margin-bottom: 8px; }

/* ============================================================
   LOTE 6 — Alerta crítico de segurança na diretoria
   ============================================================ */
.dir-alerta-critico {
    background: rgba(220,38,38,.14) !important;
    border: 1px solid rgba(220,38,38,.45) !important;
}
.dir-alerta-critico .dir-alerta-num { color: #f87171; }

/* ============================================================
   LOTE 7 — Item 6: exceção de capacidade
   ============================================================ */
.capacidade-excecao-lbl {
    display: flex; align-items: center; gap: 8px; margin-top: 8px;
    font-size: .82rem; opacity: .85; font-weight: 400; cursor: pointer;
}
.capacidade-excecao-lbl input { width: auto; margin: 0; }

/* ============================================================
   LOTE 8 — Item 1: reserva com timer + tipo de entrega
   ============================================================ */
.reserva-check-lbl { display:flex; align-items:center; gap:8px; font-weight:400; cursor:pointer; }
.reserva-check-lbl input { width:auto; margin:0; }

.reservas-wrap { margin-bottom: 14px; }
.reservas-box {
    background: rgba(59,130,246,.10); border: 1px solid rgba(59,130,246,.35);
    border-radius: 12px; padding: 12px 14px;
}
.reservas-titulo { font-weight: 700; color: #93c5fd; margin-bottom: 8px; }
.reserva-linha {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;
    background: rgba(255,255,255,.03); font-size: .88rem;
}
.reserva-linha.reserva-critica { background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.35); }
.reserva-rota { flex: 1; min-width: 200px; }
.reserva-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: #fbbf24; min-width: 78px; }
.reserva-vagas { opacity: .8; }

/* ============================================================
   LOTE 9 — Item 5: desalocar/reverter
   ============================================================ */
.btn-reverter {
    background: rgba(251,146,60,.15); color: #fb923c;
    border: 1px solid rgba(251,146,60,.4);
}
.btn-reverter:hover { background: rgba(251,146,60,.28); }
.status-cegonha-inline { font-size: .82rem; opacity: .85; }

/* ============================================================
   LOTE 10 — Item 12: cadastro de corredores
   ============================================================ */
.corredor-linha {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border-radius: 10px; margin-bottom: 8px;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); flex-wrap: wrap;
}
.corredor-info { display: flex; flex-direction: column; gap: 3px; }
.corredor-seq { font-size: .82rem; color: #93c5fd; }

/* ============================================================
   LOTE 11 — Item 12: sugestões de rota por corredor
   ============================================================ */
.sugestoes-wrap { margin-bottom: 14px; }
.sugestoes-box {
    background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.30);
    border-radius: 12px; padding: 12px 14px;
}
.sugestoes-titulo { font-weight: 700; color: #93c5fd; margin-bottom: 10px; }
.sugestao-card {
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
}
.sugestao-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sug-ocup { margin-left: auto; font-weight: 700; }
.sug-paradas { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; font-size: .84rem; }
.sug-parada { opacity: .5; }
.sug-parada-ativa { opacity: 1; color: #93c5fd; font-weight: 600; }
.sug-seta { opacity: .35; }
.sug-pedidos { display: flex; gap: 6px; flex-wrap: wrap; }
.sug-pedido {
    font-size: .78rem; padding: 2px 8px; border-radius: 999px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
}

/* ============================================================
   LOTE 12 — Item 16: tags de ETA (distintas das de integridade)
   ============================================================ */
.tag-eta {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 8px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap;
}
.tag-eta.tag-verde    { background: rgba(74,222,128,.16);  color:#4ade80; border:1px solid rgba(74,222,128,.35); }
.tag-eta.tag-amarelo  { background: rgba(251,191,36,.16);  color:#fbbf24; border:1px solid rgba(251,191,36,.35); }
.tag-eta.tag-vermelho { background: rgba(248,113,113,.16); color:#f87171; border:1px solid rgba(248,113,113,.35); }

/* ============================================================
   LOTE 14 — Itens 7-8: confirmação comercial + fechamento
   ============================================================ */
.confirmacao-wrap { margin-bottom: 14px; }
.confirmacao-box {
    background: rgba(249,115,22,.08); border: 1px solid rgba(249,115,22,.30);
    border-radius: 12px; padding: 12px 14px;
}
.confirmacao-titulo { font-weight: 700; color: #fdba74; margin-bottom: 8px; }
.confirma-linha {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;
    background: rgba(255,255,255,.03); font-size: .88rem;
}
.confirma-linha-urgente { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.35); }
.confirma-rota { flex: 1; min-width: 220px; }
.confirma-urgente { color: #f87171; font-weight: 700; }
.tag-fechada { color: #4ade80; font-weight: 700; }
.tag-verde-ok { color: #4ade80; font-weight: 600; }

/* ============================================================
   LOTE 16 — Item 11: aviso preventivo de folga próxima (15 dias)
   ============================================================ */
.aviso-folga-proxima {
    background: rgba(96,165,250,.12) !important;
    border: 1px solid rgba(96,165,250,.4) !important;
}

/* ============================================================
   LOTE 17 — Itens 3-4: last mile + equipes de entrega
   ============================================================ */
.lastmile-wrap { margin-bottom: 14px; }
.lastmile-box {
    background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.30);
    border-radius: 12px; padding: 12px 14px;
}
.lastmile-titulo { font-weight: 700; color: #6ee7b7; margin-bottom: 8px; }
.lastmile-linha {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;
    background: rgba(255,255,255,.03); font-size: .87rem;
}
.lastmile-rota { flex: 1; min-width: 220px; }
.lastmile-linha select {
    padding: 6px 9px; border-radius: 8px; font-size: .83rem;
    background: rgba(255,255,255,.05); color: inherit; border: 1px solid rgba(255,255,255,.14);
}

/* ============================================================
   LOTE 18 — Item 9: faturamento na logística + extrato motorista
   ============================================================ */
.rota-valor { color: #6ee7b7; font-weight: 600; }
.extrato-cards { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.extrato-card {
    flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px; border-radius: 12px;
    background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25);
}
.extrato-num { font-size: 1.4rem; font-weight: 800; color: #6ee7b7; }
.extrato-rot { font-size: .82rem; opacity: .8; }
.extrato-linha {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;
    background: rgba(255,255,255,.03); font-size: .87rem;
}

/* ============================================================
   LOTE 19 — Item 18: conferência de faturamento
   ============================================================ */
.conferencia-fat-wrap { margin-top: 6px; }
.tabela-conf { width: 100%; border-collapse: collapse; font-size: .87rem; }
.tabela-conf th, .tabela-conf td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.07); }
.tabela-conf th { font-weight: 600; opacity: .8; }
.conf-input {
    width: 120px; padding: 6px 9px; border-radius: 8px;
    background: rgba(255,255,255,.05); color: inherit; border: 1px solid rgba(255,255,255,.14);
}
.conf-ok { color: #4ade80; font-weight: 600; }
.conf-divergente { color: #f87171; font-weight: 700; }
.dir-conf-box {
    margin-top: 10px; padding: 10px 14px; border-radius: 10px; font-size: .9rem;
    background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25);
}
.dir-conf-box.dir-conf-alerta { background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.35); }

/* Carimbo de origem do lançamento */
.status-origem-inline { font-size: .8rem; opacity: .85; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.06); }

/* Sub-abas de Cadastros */
.cad-subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cad-subtab-btn {
    padding: 8px 16px; border-radius: 10px; cursor: pointer; font-size: .9rem;
    background: rgba(255,255,255,.05); color: inherit; border: 1px solid rgba(255,255,255,.12);
}
.cad-subtab-btn:hover { background: rgba(255,255,255,.1); }
.cad-subtab-btn.ativo { background: #2563eb; color: #fff; border-color: #2563eb; font-weight: 600; }

/* Cabeçalho do bloco da diretoria com seletor */
.dir-bloco-titulo-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.dir-bloco-titulo-row select {
    padding: 5px 10px; border-radius: 8px; font-size: .82rem;
    background: rgba(255,255,255,.05); color: inherit; border: 1px solid rgba(255,255,255,.14);
}

/* Indicador global de processamento */
#mm-processando {
    position: fixed; top: 14px; right: 14px; z-index: 99999;
    display: none; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600;
    background: rgba(20,20,25,.92); color: #e5e7eb;
    border: 1px solid rgba(255,255,255,.14); box-shadow: 0 6px 20px rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
}
#mm-processando.ativo { display: flex; }
.mm-proc-spin {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.25); border-top-color: #ff6a00;
    animation: mm-spin .7s linear infinite;
}
@keyframes mm-spin { to { transform: rotate(360deg); } }

/* ============================================================
   AJUSTES DO TEMA CLARO — componentes dos novos módulos
   (garante contraste/legibilidade no fundo branco)
   ============================================================ */
/* Botões */
[data-tema="claro"] .btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
[data-tema="claro"] .btn-danger:hover { filter: brightness(.92); background: var(--danger); }
[data-tema="claro"] .btn-reverter { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }

/* Inputs e selects dos novos formulários */
[data-tema="claro"] .manut-toolbar-campo select,
[data-tema="claro"] .manut-toolbar-campo input,
[data-tema="claro"] .epi-motorista-form input,
[data-tema="claro"] .epi-motorista-form select,
[data-tema="claro"] .epi-tamanho,
[data-tema="claro"] .conf-input,
[data-tema="claro"] .lastmile-linha select,
[data-tema="claro"] .dir-bloco-titulo-row select,
[data-tema="claro"] .manut-agendamento input,
[data-tema="claro"] .manut-emergencia input {
    background: var(--surface-1); color: var(--text-primary); border-color: var(--border);
}

/* Sub-abas de Cadastros */
[data-tema="claro"] .cad-subtab-btn { background: var(--surface-1); border-color: var(--border); color: var(--text-secondary); }
[data-tema="claro"] .cad-subtab-btn:hover { background: var(--surface-2); }
[data-tema="claro"] .cad-subtab-btn.ativo { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Linhas/cards que usavam fundo translúcido claro (some no branco) */
[data-tema="claro"] .checklist-bloco,
[data-tema="claro"] .checklist-linha,
[data-tema="claro"] .checklist-hist-linha,
[data-tema="claro"] .corredor-linha,
[data-tema="claro"] .reserva-linha,
[data-tema="claro"] .confirma-linha,
[data-tema="claro"] .lastmile-linha,
[data-tema="claro"] .extrato-linha,
[data-tema="claro"] .sugestao-card,
[data-tema="claro"] .sug-pedido {
    background: var(--surface-1); border-color: var(--border);
}
[data-tema="claro"] .checklist-linha { border-top-color: var(--border-soft); }
[data-tema="claro"] .checklist-opcoes .opt { border-color: var(--border); }

/* Tabelas dos novos painéis */
[data-tema="claro"] .tabela-epi th, [data-tema="claro"] .tabela-epi td,
[data-tema="claro"] .tabela-conf th, [data-tema="claro"] .tabela-conf td { border-bottom-color: var(--border-soft); }

/* Extrato do motorista */
[data-tema="claro"] .extrato-card { background: var(--success-soft); border-color: var(--success); }
[data-tema="claro"] .extrato-num { color: var(--success); }

/* Caixas de destaque — usar tints do tema claro */
[data-tema="claro"] .reservas-box,
[data-tema="claro"] .sugestoes-box { background: var(--accent-soft); border-color: var(--accent); }
[data-tema="claro"] .confirmacao-box { background: var(--warning-soft); border-color: var(--warning); }
[data-tema="claro"] .emergencia-banner,
[data-tema="claro"] .emergencia-linha { background: var(--danger-soft); border-color: var(--danger); }
[data-tema="claro"] .lastmile-box,
[data-tema="claro"] .dir-conf-box { background: var(--success-soft); border-color: var(--success); }
[data-tema="claro"] .dir-conf-box.dir-conf-alerta { background: var(--danger-soft); border-color: var(--danger); }

/* Títulos/realces legíveis no claro */
[data-tema="claro"] .reservas-titulo,
[data-tema="claro"] .sugestoes-titulo,
[data-tema="claro"] .corredor-seq,
[data-tema="claro"] .reserva-timer,
[data-tema="claro"] .sug-parada-ativa { color: var(--accent-hover); }
[data-tema="claro"] .confirmacao-titulo { color: var(--warning); }
[data-tema="claro"] .emergencia-banner-titulo,
[data-tema="claro"] .emergencia-badge,
[data-tema="claro"] .confirma-urgente { color: var(--danger); }
[data-tema="claro"] .lastmile-titulo { color: var(--success); }
[data-tema="claro"] .status-origem-inline { background: var(--surface-2); color: var(--text-secondary); }

/* Preview do cálculo de frete */
.frete-preview { margin-top: 6px; font-size: .82rem; opacity: .9; color: var(--accent, #ff6a00); }
.frete-preview strong { color: inherit; }
[data-tema="claro"] .frete-preview { color: var(--accent-hover); }

/* Contraste no tema claro — painel de acompanhamento (id/subtexto/badges) */
[data-tema="claro"] .ocup-id,
[data-tema="claro"] .ocup-sub,
[data-tema="claro"] .ocup-resp { color: var(--text-secondary) !important; }
[data-tema="claro"] .badge-ref { color: var(--text-secondary); border-color: var(--border); }

/* Carteira de Demanda */
.painel-subtabs { margin: 6px 0 14px; }
.carteira-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.carteira-topo .ocup-busca { max-width: 360px; }
.carteira-grupo { margin-bottom: 14px; border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 12px; overflow: hidden; }
.carteira-grupo-tit { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-weight: 700; background: var(--surface-2, rgba(255,255,255,.05)); }
.carteira-badge { font-size: .78rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft, rgba(249,115,22,.15)); color: var(--accent, #ff6a00); }
.carteira-linha { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 9px 14px; border-top: 1px solid var(--border-soft, rgba(255,255,255,.06)); font-size: .88rem; }
.carteira-cli { flex: 1; min-width: 200px; }
.carteira-valor { font-weight: 700; white-space: nowrap; margin-left: auto; }
[data-tema="claro"] .carteira-grupo-tit { background: var(--surface-1); }

/* Carteira — ação de rota (select + botão) */
.carteira-acao { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.carteira-acao select { padding: 5px 9px; border-radius: 8px; font-size: .8rem; background: var(--surface-1, rgba(255,255,255,.05)); color: inherit; border: 1px solid var(--border, rgba(255,255,255,.14)); max-width: 220px; }
[data-tema="claro"] .carteira-acao select { background: var(--surface-1); color: var(--text-primary); border-color: var(--border); }

/* Painel de Corredores */
.corredores-grid { display: flex; flex-direction: column; gap: 12px; }
.corredor-card { border: 1px solid var(--border, rgba(255,255,255,.1)); border-left: 5px solid var(--accent, #ff6a00); border-radius: 12px; overflow: hidden; margin-bottom: 18px; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.corredor-card-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; cursor: pointer; background: var(--surface-2, rgba(255,255,255,.04)); border-bottom: 1px solid transparent; }
.corredor-card-cab:hover { background: var(--surface-1, rgba(255,255,255,.07)); }
.corredor-card-cab strong { font-size: 1.05rem; letter-spacing: .3px; }
/* Quando aberto: faixa de destaque no topo do corredor */
.corredor-card:has(.corredor-pedidos) { border-left-color: #ff6a00; box-shadow: 0 0 0 1px rgba(249,115,22,.35), 0 4px 16px rgba(0,0,0,.28); }
.corredor-card:has(.corredor-pedidos) > .corredor-card-cab { background: linear-gradient(90deg, rgba(249,115,22,.22), rgba(249,115,22,.06)); border-bottom: 2px solid rgba(249,115,22,.5); }
.corredor-card-nums { display: flex; align-items: center; gap: 8px; }
.corredor-semrota { font-size: .74rem; font-weight: 700; color: #fbbf24; background: rgba(251,191,36,.14); padding: 2px 8px; border-radius: 999px; }
.corredor-chevron { opacity: .6; font-size: .8rem; }
.corredor-paradas-linha { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 8px 14px; font-size: .82rem; border-top: 1px solid var(--border-soft, rgba(255,255,255,.06)); }
.corredor-parada { background: var(--accent-soft, rgba(249,115,22,.12)); color: var(--accent, #ff6a00); padding: 1px 8px; border-radius: 6px; font-weight: 600; }
.corredor-pedidos { padding: 4px 14px 12px; overflow-x: auto; }
.corredor-pedidos .corr-tabela { min-width: 900px; }
.corredor-pedido-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--border-soft, rgba(255,255,255,.06)); font-size: .86rem; }
.status-pill-mini { font-size: .72rem; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.08); }
.corredor-tag-semrota { font-size: .72rem; font-weight: 700; color: #fbbf24; margin-left: auto; }
.corredor-tag-comrota { font-size: .72rem; color: #4ade80; margin-left: auto; }
[data-tema="claro"] .corredor-card-cab { background: var(--surface-1); }
[data-tema="claro"] .status-pill-mini { background: var(--surface-2); }

/* Status "Pátio" (vira o status visível quando o carro está no pátio) */
.status-pill-patio { background: rgba(96,165,250,0.16) !important; color: #60a5fa !important; border: 1px solid rgba(96,165,250,0.5) !important; font-weight: 700; }
[data-tema="claro"] .status-pill-patio { color: #2563eb !important; }

/* Agrupamento por ponto de descida no corredor */
.corredor-drop { margin: 6px 0; }
.corredor-drop-tit { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: #93c5fd; padding: 6px 0 2px; border-bottom: 1px dashed var(--border-soft, rgba(255,255,255,.08)); margin-bottom: 4px; }
[data-tema="claro"] .corredor-drop-tit { color: #2563eb; }

/* Corredor — ponto de divisão (hub) e tronco */
.corredor-div-sel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .82rem; font-weight: 600; padding: 6px 0; }
.corredor-div-sel select { padding: 4px 9px; border-radius: 8px; background: var(--surface-1, rgba(255,255,255,.05)); color: inherit; border: 1px solid var(--border, rgba(255,255,255,.14)); }
.corredor-tronco-nota { font-size: .82rem; padding: 8px 10px; margin: 6px 0 10px; border-radius: 8px; background: rgba(96,165,250,.1); border: 1px solid rgba(96,165,250,.25); }
.corredor-drop.drop-transb .corredor-drop-tit { color: #fbbf24; }
.corredor-drop.drop-desce .corredor-drop-tit { color: #4ade80; }
.corredor-drop.drop-fora .corredor-drop-tit { color: #f87171; }
[data-tema="claro"] .corredor-div-sel select { background: var(--surface-1); color: var(--text-primary); }
[data-tema="claro"] .corredor-tronco-nota { background: rgba(37,99,235,.08); }

/* Corredor — barra de seleção de carros para criar rota */
.corr-check { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent, #ff6a00); flex-shrink: 0; }
.corredor-selbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2, rgba(255,255,255,.05)); border: 1px solid var(--border, rgba(255,255,255,.12)); }
.corredor-cont { font-size: .88rem; }
.corredor-selbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.cont-excede { color: #fbbf24; font-weight: 700; }
[data-tema="claro"] .corredor-selbar { background: var(--surface-1); }

/* Separação visual reforçada dos corredores */
.corredores-grid { gap: 20px; }
.corredor-paradas-linha { background: rgba(249,115,22,.06); }
.corredor-card:has(.corredor-pedidos) .corredor-paradas-linha { background: rgba(249,115,22,.1); font-weight: 600; }
/* separador entre grupos (descem/transbordam) mais visível */
.corredor-drop { border-left: 3px solid transparent; padding-left: 8px; margin: 10px 0; }
.corredor-drop.drop-desce { border-left-color: #4ade80; }
.corredor-drop.drop-transb { border-left-color: #fbbf24; }
.corredor-drop.drop-fora { border-left-color: #f87171; }
[data-tema="claro"] .corredor-card:has(.corredor-pedidos) > .corredor-card-cab { background: linear-gradient(90deg, rgba(249,115,22,.18), rgba(249,115,22,.04)); }

/* ===== Cores rotativas por corredor ===== */
.cor-corredor-1 { border-left-color: #ff6a00 !important; }
.cor-corredor-2 { border-left-color: #3b82f6 !important; }
.cor-corredor-3 { border-left-color: #22c55e !important; }
.cor-corredor-4 { border-left-color: #a855f7 !important; }
.cor-corredor-5 { border-left-color: #ec4899 !important; }
.cor-corredor-6 { border-left-color: #14b8a6 !important; }
.cor-corredor-1:has(.corredor-pedidos) > .corredor-card-cab { background: linear-gradient(90deg, rgba(255,106,0,.22), transparent); border-bottom-color: #ff6a00; }
.cor-corredor-2:has(.corredor-pedidos) > .corredor-card-cab { background: linear-gradient(90deg, rgba(59,130,246,.22), transparent); border-bottom-color: #3b82f6; }
.cor-corredor-3:has(.corredor-pedidos) > .corredor-card-cab { background: linear-gradient(90deg, rgba(34,197,94,.22), transparent); border-bottom-color: #22c55e; }
.cor-corredor-4:has(.corredor-pedidos) > .corredor-card-cab { background: linear-gradient(90deg, rgba(168,85,247,.22), transparent); border-bottom-color: #a855f7; }
.cor-corredor-5:has(.corredor-pedidos) > .corredor-card-cab { background: linear-gradient(90deg, rgba(236,72,153,.22), transparent); border-bottom-color: #ec4899; }
.cor-corredor-6:has(.corredor-pedidos) > .corredor-card-cab { background: linear-gradient(90deg, rgba(20,184,166,.22), transparent); border-bottom-color: #14b8a6; }

/* ===== Linha do pedido em grade alinhada ===== */
.corredor-pedido-linha {
  display: grid;
  grid-template-columns: 26px 52px 1.4fr 1.6fr 1.4fr 1fr 1.3fr auto auto;
  align-items: center; gap: 10px;
  padding: 9px 6px; border-top: 1px solid var(--border-soft, rgba(255,255,255,.06));
}
.cpl-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .84rem; }
.cpl-col > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpl-rot { font-size: .62rem; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted, #9ca3af); font-weight: 700; }
.cpl-id { font-weight: 700; color: var(--text-muted, #9ca3af); }
.cpl-seta { color: var(--accent, #ff6a00); font-weight: 700; }
.cpl-veic strong { letter-spacing: .3px; }
.cpl-acoes { flex-direction: row; gap: 4px; }
.cpl-status { white-space: normal; }
.cpl-status .status-pill-mini { display: inline-block; }
/* responsivo: em telas estreitas vira lista */
@media (max-width: 820px) {
  .corredor-pedido-linha { grid-template-columns: 22px 1fr auto; grid-auto-rows: auto; }
  .cpl-id { grid-column: 1; }
  .cpl-veic, .cpl-rota, .cpl-cli, .cpl-frete, .cpl-status, .cpl-selo { grid-column: 2; }
  .cpl-acoes { grid-column: 3; grid-row: 1 / 4; }
}
[data-tema="claro"] .cpl-rot { color: #6b7280; }

/* Campos de filtro origem/destino */
.ocup-busca-od { max-width: 160px; }

/* Origem/Destino empilhados */
.ocup-od-grupo { display: flex; flex-direction: column; gap: 6px; }
.ocup-od-grupo .ocup-busca-od { max-width: 200px; }

/* Origem → Destino na horizontal, dentro da coluna do corredor */
.cpl-rota { min-width: 0; }
.cpl-od { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.cpl-od-orig, .cpl-od-dest { overflow: hidden; text-overflow: ellipsis; }
.cpl-od-orig { color: var(--text-secondary, #a5a5ac); }
.cpl-od-dest { color: var(--text-primary); }
.cpl-od .cpl-seta { flex-shrink: 0; }

/* ===== Linha de carro no corredor — layout limpo 2 linhas ===== */
.cpl { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-top: 1px solid var(--border-soft, rgba(255,255,255,.06)); }
.cpl:hover { background: rgba(255,255,255,.03); }
.cpl .corr-check { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent, #ff6a00); flex-shrink: 0; }
.cpl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cpl-l1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cpl-l2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8rem; color: var(--text-secondary, #a5a5ac); }
.cpl-id { font-weight: 700; color: var(--text-muted, #9ca3af); font-size: .82rem; min-width: 34px; }
.cpl-veic { font-size: .9rem; }
.cpl-veic strong { letter-spacing: .4px; }
.cpl-modelo { color: var(--text-secondary, #a5a5ac); font-size: .82rem; }
.cpl-od { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; }
.cpl-od-orig { color: var(--text-secondary, #a5a5ac); }
.cpl-od-dest { color: var(--text-primary); }
.cpl-seta { color: var(--accent, #ff6a00); font-weight: 700; }
.cpl-cli { font-weight: 600; color: var(--text-secondary, #a5a5ac); }
.cpl-dot { opacity: .4; }
.cpl-frete { font-weight: 700; color: #4ade80; white-space: nowrap; font-size: .9rem; }
.cpl-acoes { display: flex; gap: 5px; flex-shrink: 0; }
@media (max-width: 720px) {
  .cpl-frete { display: none; }
  .cpl-l1 { gap: 8px; }
}
[data-tema="claro"] .cpl:hover { background: rgba(0,0,0,.03); }

/* ===== Tabela de carros no corredor ===== */
.corr-tabela { width: 100%; border-collapse: collapse; font-size: .84rem; margin-top: 4px; }
.corr-tabela thead th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted, #9ca3af); font-weight: 700; padding: 4px 8px; border-bottom: 1px solid var(--border, rgba(255,255,255,.12)); white-space: nowrap; }
.corr-tabela td { padding: 5px 8px; border-bottom: 1px solid var(--border-soft, rgba(255,255,255,.05)); vertical-align: middle; }
.corr-tr:hover { background: rgba(255,255,255,.03); }
.corr-tabela .corr-check { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent, #ff6a00); }
.ct-id { color: var(--text-muted, #9ca3af); font-weight: 700; white-space: nowrap; }
.ct-placa strong { letter-spacing: .4px; font-size: .9rem; }
.ct-modelo { color: var(--text-secondary, #a5a5ac); }
.ct-rota { white-space: nowrap; font-size: .88rem; }
.ct-rota strong { color: var(--text-primary); }
.ct-rota .cpl-seta { color: var(--accent, #ff6a00); font-weight: 700; }
.ct-cli { font-weight: 600; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-frete { color: #4ade80; font-weight: 700; white-space: nowrap; }
.ct-status { white-space: nowrap; }
.ct-acoes { white-space: nowrap; text-align: right; }
.ct-acoes .btn-kanban-patio { margin-left: 3px; }
[data-tema="claro"] .corr-tr:hover { background: rgba(0,0,0,.03); }

/* Pílula de status colorida (corredores) */
.status-pill-cor { font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; display: inline-block; }

/* Módulo de cobrança */
.cobranca-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cobranca-filtros .ocup-busca { max-width: 240px; margin-left: auto; }
.cob-resumo { display: flex; gap: 16px; flex-wrap: wrap; padding: 12px; margin-bottom: 14px; border-radius: 10px; background: var(--surface-2, rgba(255,255,255,.04)); }
.cob-resumo-item { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; }
[data-tema="claro"] .cob-resumo { background: var(--surface-1); }

/* Aviso de carga atual no modal inserir carro */
.cob-aviso-carga { color: #fbbf24; font-weight: 700; font-size: .8rem; }

/* Tela de Equipes */
.equipe-abas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

/* Cegonha/motorista clicável no card da rota */
.rota-cegonha-link { color: var(--accent, #ff6a00); cursor: pointer; text-decoration: underline dotted; font-weight: 700; }
.rota-cegonha-link:hover { text-decoration: underline; }

/* Tag de corredor direcionado na Rotas Diversas */
.rd-corredor-tag { display:inline-block; font-size:.72rem; font-weight:700; padding:2px 9px; border-radius:999px; background:rgba(96,165,250,.14); color:#60a5fa; border:1px solid rgba(96,165,250,.4); white-space:nowrap; }

/* Histórico de cargas */
.hist-filtros { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.hist-filtros .ocup-busca { max-width:180px; }
.hist-data { font-size:.82rem; color:var(--text-muted,#9ca3af); display:flex; align-items:center; gap:4px; }
.hist-motorista { margin-bottom:22px; border:1px solid var(--border,rgba(255,255,255,.1)); border-left:4px solid var(--accent,#ff6a00); border-radius:12px; overflow:hidden; }
.hist-mot-cab { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px; background:var(--surface-2,rgba(255,255,255,.04)); flex-wrap:wrap; }
.hist-mot-cab strong { font-size:1.02rem; }
.hist-carga { border-top:1px solid var(--border-soft,rgba(255,255,255,.06)); padding:10px 14px; }
.hist-carga-cab { display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:.85rem; margin-bottom:6px; }
.hist-carga-cab .hist-rota { color:var(--accent,#ff6a00); font-weight:600; }
.hist-carga-cab .hist-total { margin-left:auto; color:#4ade80; font-weight:700; }
[data-tema="claro"] .hist-mot-cab { background:var(--surface-1); }

/* Viagem colapsável no histórico */
.hist-carga-toggle { cursor:pointer; user-select:none; }
.hist-carga-toggle:hover { background:rgba(255,255,255,.03); }
.hist-chevron { color:var(--accent,#ff6a00); font-weight:700; width:14px; display:inline-block; }
[data-tema="claro"] .hist-carga-toggle:hover { background:rgba(0,0,0,.03); }

/* Remuneração do motorista */
.rem-selo { font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.rem-selo-tab { background:rgba(74,222,128,.15); color:#4ade80; }
.rem-selo-ped { background:rgba(96,165,250,.15); color:#60a5fa; }
.rem-selo-man { background:rgba(251,191,36,.15); color:#d99e18; }
.rem-selo-pend { background:rgba(248,113,113,.15); color:#f87171; }
.rem-tr-pend { background:rgba(248,113,113,.06); }
.rem-alerta { background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.4); color:#d99e18; padding:10px 14px; border-radius:10px; font-size:.86rem; margin-bottom:12px; }

/* Valor motorista no histórico de cargas */
.hist-total-mot { color:#60a5fa; font-weight:700; margin-left:8px; }

/* Romaneio de carregamento */
.romaneio-cab { padding:10px 14px; background:var(--surface-2,rgba(255,255,255,.04)); border-radius:10px; margin-bottom:6px; }
.romaneio-cab strong { font-size:1rem; }

/* Cards minimizáveis */
.card-chevron { color: var(--accent, #ff6a00); font-size: .85em; }
.card-recolhido { padding-bottom: 14px; }

/* Jornada do carro — timeline vertical */
.jornada-tl { position:relative; padding-left:8px; }
.jornada-ev { display:flex; gap:12px; align-items:flex-start; position:relative; padding-bottom:16px; }
.jornada-ev:not(:last-child)::before { content:''; position:absolute; left:15px; top:32px; bottom:-4px; width:2px; background:var(--border,rgba(255,255,255,.12)); }
.jornada-ic { flex:0 0 32px; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; z-index:1; }
.jornada-ct { flex:1; min-width:0; padding-top:3px; }
.jornada-tit { font-weight:600; font-size:.9rem; }
.jornada-det { font-size:.8rem; color:var(--text-secondary,#9ca3af); margin-top:2px; }
.jornada-data { font-size:.72rem; color:var(--text-tertiary,#6b7280); margin-top:2px; }

/* Dropdown de status estilo planilha */
.status-planilha-sel {
  background: var(--surface-1, #1a1c20);
  border: 1.5px solid #8886;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
  max-width: 150px;
}
.status-planilha-sel:hover { filter: brightness(1.15); }

/* Botão voltar 1 etapa */
.btn-voltar-etapa { background:transparent; border:1px solid var(--border,rgba(255,255,255,.15)); border-radius:6px; padding:2px 6px; cursor:pointer; font-size:.8rem; margin-left:4px; opacity:.7; }
.btn-voltar-etapa:hover { opacity:1; border-color:#fb923c; }

/* Modal de pulo de etapas */
.pulo-etapa { border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:10px; padding:12px 14px; margin-bottom:12px; }
.pulo-etapa-tit { font-weight:700; margin-bottom:8px; }
.pulo-etapa label { display:block; font-size:.78rem; color:var(--text-secondary,#9ca3af); margin:8px 0 3px; }
.pulo-etapa select, .pulo-etapa input { width:100%; padding:8px 10px; border-radius:8px; background:var(--surface-2,rgba(255,255,255,.04)); border:1px solid var(--border,rgba(255,255,255,.12)); color:inherit; }
.pulo-transbordo-aviso { background:rgba(251,146,60,.12); border:1px solid rgba(251,146,60,.4); color:#fb923c; padding:10px 14px; border-radius:10px; font-size:.84rem; margin-bottom:14px; }

/* Transbordo previsto (planejamento) */
.selo-transb-prev { background:rgba(251,146,60,.15); color:#fb923c; font-size:.7rem; font-weight:700; padding:1px 7px; border-radius:999px; white-space:nowrap; }
.sel-transb-prev { background:var(--surface-2,rgba(255,255,255,.04)); border:1px solid rgba(251,146,60,.4); color:#fb923c; border-radius:6px; padding:2px 6px; font-size:.72rem; cursor:pointer; margin-left:6px; }

/* ===== FIX FORTE: número das etapas da logística sempre visível (dark e claro) ===== */
html .log-grupo-rotulo span.log-passo,
html[data-tema="claro"] .log-grupo-rotulo span.log-passo,
html[data-tema="claro"] span.log-passo-bolinha {
    background-color: #fb923c !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}
html span.log-passo-bolinha {
    -webkit-text-fill-color: #ffffff !important;
}

/* ===== VIAGENS EM ANDAMENTO (Jornada da Viagem) ===== */
/* A lista de viagens era uma coluna de 260px: com 14 viagens ativas, escolher
   uma significava descer a barra e subir de novo a cada troca. Agora ela é uma
   faixa horizontal no topo — as viagens ficam lado a lado, na largura inteira,
   e o detalhe abre embaixo sem tirar a lista de vista. */
.viagens-layout { display:block; margin-top:12px; }

/* Os cards quebram de linha preenchendo a largura inteira, em vez de ficarem
   presos a duas fileiras com sobra de espaço à direita. O título saiu da
   vertical — gastava uma coluna e deixava um vão à esquerda. */
.viagens-lista {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:10px;
  margin-bottom:16px;
  align-content:start;
  max-height:none;
}
.viagens-lista-tit { grid-column:1 / -1; margin:0 0 2px; }
@media(max-width:600px){
  .viagens-lista { grid-template-columns:1fr; }
}
.viagens-lista-tit { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-secondary,#9ca3af); margin-bottom:2px; }
.viagem-item { padding:10px 12px; border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:10px; cursor:pointer; background:var(--surface-1,rgba(255,255,255,.03)); transition:border-color .15s,background .15s; }
.viagem-item:hover { border-color:rgba(255,106,0,.4); }
.viagem-item.sel { border-color:#ff6a00; background:rgba(255,106,0,.08); }
.viagem-item-nome { font-weight:600; font-size:.9rem; }
.viagem-item-sub { font-size:.76rem; color:var(--text-secondary,#9ca3af); margin-top:2px; }
.viagem-item-etapa { font-size:.76rem; color:#fb923c; margin-top:3px; font-weight:600; }

.viagem-detalhe { min-width:0; }

/* Timeline horizontal */
.jv-timeline { display:flex; align-items:flex-start; overflow-x:auto; padding:14px 6px 6px; gap:0; }
.jv-etapa { display:flex; flex-direction:column; align-items:center; min-width:88px; flex:0 0 auto; text-align:center; }
.jv-bolha { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; border:2px solid var(--border,rgba(255,255,255,.15)); background:var(--surface-2,rgba(255,255,255,.04)); color:var(--text-secondary,#9ca3af); }
.jv-etapa.feito .jv-bolha { background:#16a34a; border-color:#16a34a; color:#fff; }
.jv-etapa.atual .jv-bolha { background:#2563eb; border-color:#2563eb; color:#fff; box-shadow:0 0 0 4px rgba(37,99,235,.2); }
.jv-num { font-size:.72rem; font-weight:700; margin-top:5px; }
.jv-label { font-size:.68rem; color:var(--text-secondary,#9ca3af); margin-top:2px; line-height:1.2; }
.jv-etapa.atual .jv-num, .jv-etapa.atual .jv-label { color:#2563eb; }
.jv-conector { flex:1 1 auto; height:2px; background:var(--border,rgba(255,255,255,.15)); margin-top:18px; min-width:16px; }
.jv-conector.feito { background:#16a34a; }

/* Dados da viagem */
.jv-dados { border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; padding:14px 16px; margin-top:12px; background:var(--surface-1,rgba(255,255,255,.03)); }
.jv-dados-tit { font-weight:700; font-size:1rem; margin-bottom:12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.jv-badge { font-size:.7rem; font-weight:700; background:rgba(52,211,153,.15); color:#34d399; padding:2px 8px; border-radius:999px; }
.jv-dados-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:640px){ .jv-dados-grid{ grid-template-columns:repeat(2,1fr); } }
.jv-dados-grid > div { display:flex; flex-direction:column; }
.jv-dl { font-size:.68rem; text-transform:uppercase; letter-spacing:.4px; color:var(--text-tertiary,#6b7280); }
.jv-dv { font-size:.9rem; font-weight:600; margin-top:2px; }
.jv-placeholder { margin-top:12px; border:1px dashed var(--border,rgba(255,255,255,.15)); border-radius:12px; }

/* Viagens — Bloco 2: carga e resumo */
.jv-corpo { display:grid; grid-template-columns:1fr 1.3fr; gap:14px; margin-top:12px; }
@media(max-width:820px){ .jv-corpo{ grid-template-columns:1fr; } }
.jv-col-esq, .jv-col-dir { display:flex; flex-direction:column; gap:12px; min-width:0; }

.jv-resumo { border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; padding:14px 16px; background:var(--surface-1,rgba(255,255,255,.03)); }
.jv-resumo-tit { font-weight:700; font-size:.9rem; margin-bottom:10px; }
.jv-resumo-linhas { display:flex; flex-direction:column; gap:7px; margin-bottom:12px; }
.jv-resumo-item { display:flex; justify-content:space-between; font-size:.85rem; }
.jv-resumo-item span { color:var(--text-secondary,#9ca3af); }
.jv-barra-ocup { height:10px; border-radius:999px; background:var(--surface-2,rgba(255,255,255,.08)); overflow:hidden; }
.jv-barra-fill { height:100%; border-radius:999px; transition:width .3s ease; }
.jv-barra-pct { text-align:right; font-size:.78rem; font-weight:700; margin-top:5px; color:var(--text-secondary,#9ca3af); }

.jv-carga { border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; padding:14px 16px; background:var(--surface-1,rgba(255,255,255,.03)); }
.jv-carga-cab { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:6px; }
.jv-carga-tit { font-weight:700; font-size:.9rem; }
.jv-carga-badge { font-size:.72rem; font-weight:700; background:rgba(74,222,128,.15); color:#4ade80; padding:2px 8px; border-radius:999px; }
.jv-tabela { width:100%; border-collapse:collapse; font-size:.76rem; min-width:420px; }
.jv-tabela thead th { text-align:left; font-size:.63rem; text-transform:uppercase; letter-spacing:.3px; color:var(--text-muted,#9ca3af); font-weight:700; padding:3px 6px; border-bottom:1px solid var(--border,rgba(255,255,255,.12)); white-space:nowrap; }
.jv-tabela td { padding:3px 6px; border-bottom:1px solid var(--border-soft,rgba(255,255,255,.05)); line-height:1.3; }
.jv-tabela td:nth-child(3){ max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jv-vagas-livres { margin-top:8px; font-size:.78rem; color:#60a5fa; font-weight:600; }

/* Viagens — Bloco 3: ações e documentos */
.jv-acoes { border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; padding:14px 16px; background:var(--surface-1,rgba(255,255,255,.03)); display:flex; flex-direction:column; gap:8px; }
.jv-acoes-tit { font-weight:700; font-size:.9rem; margin-bottom:4px; }
.jv-acao { border:none; border-radius:9px; padding:11px 14px; font-weight:700; font-size:.85rem; color:#fff; cursor:pointer; text-align:left; transition:filter .15s, transform .1s; }
.jv-acao:hover { filter:brightness(1.1); }
.jv-acao:active { transform:scale(.98); }
.jv-acao-coleta { background:#16a34a; }
.jv-acao-viagem { background:#2563eb; }
.jv-acao-entrega { background:#4ade80; color:#0f1115; }
.jv-acao-transbordo { background:#fb923c; color:#0f1115; }
.jv-acao-ocorrencia { background:#f97316; }
.jv-acao-finalizar { background:#6b7280; }

.jv-docs { border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; padding:14px 16px; background:var(--surface-1,rgba(255,255,255,.03)); }
.jv-docs-tit { font-weight:700; font-size:.9rem; margin-bottom:8px; }
.jv-doc-item { display:flex; justify-content:space-between; align-items:center; font-size:.83rem; padding:4px 0; border-bottom:1px solid var(--border-soft,rgba(255,255,255,.05)); }
.jv-doc-ver { color:#60a5fa; text-decoration:none; font-weight:600; }

.jv-sel-linha { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:8px; cursor:pointer; font-size:.85rem; }
.jv-sel-linha:hover { border-color:rgba(255,106,0,.35); }
.jv-sel-carro { width:16px; height:16px; accent-color:#ff6a00; }

/* ===== PLANEJAMENTO DE ROTAS (drag & drop) ===== */
.plan-kpis { display:flex; gap:12px; margin:12px 0; flex-wrap:wrap; }
.plan-kpi { flex:1; min-width:120px; border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:10px; padding:10px 14px; background:var(--surface-1,rgba(255,255,255,.03)); }
.plan-kpi-lbl { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.4px; color:var(--text-tertiary,#6b7280); }
.plan-kpi-num { font-size:1.5rem; font-weight:700; }

/* Mesma mudança da lista de viagens: a coluna de corredores com 12+ itens
   obrigava a rolar a página toda para trocar de corredor. A faixa horizontal
   mantém tudo ao alcance. */
.plan-layout { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
@media(max-width:900px){ .plan-layout{ grid-template-columns:1fr; } }

.plan-corr-faixa { margin-bottom:14px; }
.plan-corr-faixa .plan-corr-lista {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(196px, 1fr));
  gap:9px;
  align-content:start;
}
.plan-corr-faixa .plan-corr-item { margin-bottom:0; }
@media(max-width:600px){
  .plan-corr-faixa .plan-corr-lista { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
}

/* (a barra de rolagem lateral saiu junto com a rolagem horizontal — as duas
   faixas agora quebram linha e não rolam) */
.plan-col { border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; padding:12px; background:var(--surface-1,rgba(255,255,255,.02)); min-width:0; }
.plan-col-tit { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-secondary,#9ca3af); margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; }
.plan-col-badge { font-size:.7rem; font-weight:600; background:var(--surface-2,rgba(255,255,255,.06)); padding:2px 8px; border-radius:999px; color:var(--text-secondary,#9ca3af); }

.plan-corr-item { padding:10px 12px; border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:9px; cursor:pointer; margin-bottom:8px; transition:border-color .15s, background .15s; }
.plan-corr-item:hover { border-color:rgba(255,106,0,.4); }
.plan-corr-item.sel { border-color:#ff6a00; background:rgba(255,106,0,.08); }
.plan-corr-nome { font-weight:600; font-size:.86rem; }
.plan-corr-sub { font-size:.72rem; color:var(--text-secondary,#9ca3af); margin-top:2px; }

.plan-pedidos-lista { display:grid; grid-template-columns:repeat(auto-fill, minmax(268px, 1fr));
  gap:10px; max-height:none; overflow:visible; align-content:start; }
@media(max-width:600px){ .plan-pedidos-lista{ grid-template-columns:1fr; } }
.plan-pedido { border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:9px; padding:9px 11px; background:var(--surface-2,rgba(255,255,255,.03)); cursor:grab; transition:border-color .15s, box-shadow .15s; }
.plan-pedido:hover { border-color:rgba(255,106,0,.5); box-shadow:0 2px 8px rgba(0,0,0,.15); }
.plan-pedido:active { cursor:grabbing; }
.plan-pedido-top { display:flex; align-items:center; gap:8px; }
.plan-pedido-id { font-size:.72rem; color:var(--text-tertiary,#6b7280); font-weight:700; }
.plan-pedido-placa { font-weight:700; font-size:.85rem; }
.plan-pedido-valor { margin-left:auto; font-size:.78rem; font-weight:700; color:#4ade80; }
.plan-pedido-sub { font-size:.74rem; color:var(--text-secondary,#9ca3af); margin-top:3px; }
.plan-pedido-rota { font-size:.74rem; margin-top:2px; }

.plan-carros-lista { display:flex; flex-direction:column; gap:12px; max-height:520px; overflow-y:auto; }
.plan-carro { border:1px solid var(--border,rgba(255,255,255,.15)); border-radius:10px; padding:10px; background:var(--surface-2,rgba(255,255,255,.03)); transition:border-color .15s, background .15s; }
.plan-carro-hover { border-color:#ff6a00; background:rgba(255,106,0,.1); }
.plan-carro-cab { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.plan-carro-nome { font-weight:700; font-size:.85rem; }
.plan-carro-info { font-size:.76rem; color:var(--text-secondary,#9ca3af); font-weight:600; }
.plan-carro-ped { display:flex; justify-content:space-between; align-items:center; font-size:.78rem; padding:4px 6px; border-radius:6px; background:rgba(74,222,128,.08); margin-bottom:4px; }
.plan-ped-x { background:none; border:none; color:#ef4444; cursor:pointer; font-size:.8rem; padding:0 4px; }
.plan-carro-drop { text-align:center; font-size:.74rem; color:var(--text-tertiary,#6b7280); padding:8px; border:1px dashed var(--border,rgba(255,255,255,.2)); border-radius:7px; margin-top:6px; }
.plan-add-carro { width:100%; margin-top:10px; padding:10px; border:1px dashed var(--border,rgba(255,255,255,.25)); border-radius:9px; background:none; color:var(--text-secondary,#9ca3af); cursor:pointer; font-weight:600; font-size:.83rem; }
.plan-add-carro:hover { border-color:#ff6a00; color:#ff6a00; }

.plan-resumo { border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; padding:14px 16px; background:var(--surface-1,rgba(255,255,255,.03)); }
.plan-resumo-tit { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-secondary,#9ca3af); margin-bottom:10px; }
.plan-resumo-grid { display:flex; gap:28px; flex-wrap:wrap; }
.plan-resumo-grid > div { display:flex; flex-direction:column; }
.plan-resumo-num { font-size:1.5rem; font-weight:700; }
.plan-resumo-lbl { font-size:.72rem; color:var(--text-secondary,#9ca3af); }

/* Planejamento — novo layout (corredor → pedidos → viagem) */
/* A coluna de corredores virou faixa horizontal acima, e o que restou aqui é
   só a lista de pedidos. Reservar uma segunda coluna deixava metade da tela
   vazia à direita, com os cards espremidos na metade esquerda. */
.plan-layout2 { display:block; margin-bottom:14px; }
.plan-corr-hover { border-color:#ff6a00 !important; background:rgba(255,106,0,.15) !important; box-shadow:0 0 0 2px rgba(255,106,0,.3); }
.plan-criar-viagem { background:#ff6a00; color:#fff; border:none; border-radius:8px; padding:6px 12px; font-weight:700; font-size:.78rem; cursor:pointer; }
.plan-criar-viagem:hover { filter:brightness(1.1); }
.plan-ped-tag { font-size:.72rem; }

/* Planejamento — aba Sem rota */
.plan-corr-semrota { border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.06); margin-bottom:12px; }
.plan-corr-semrota.sel { border-color:#ef4444; background:rgba(239,68,68,.12); }
.plan-corr-semrota .plan-corr-nome { color:#ef4444; }
.plan-pedido-hint { font-size:.68rem; color:#fb923c; margin-top:4px; }

/* Ação puxar pedido */
.jv-acao-puxar { background:#8b5cf6; }

/* ===== CENTRAL DE OPERAÇÃO ===== */
.central-topo { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; margin:12px 0 16px; }
.central-base { display:flex; flex-direction:column; gap:4px; }
.central-base label { font-size:.68rem; font-weight:700; letter-spacing:.5px; color:var(--text-tertiary,#6b7280); }
.central-base select { padding:9px 12px; border-radius:9px; border:1px solid var(--border,rgba(255,255,255,.15)); background:var(--surface-1,rgba(255,255,255,.03)); color:inherit; min-width:180px; font-weight:600; }
/* Busca de cada coluna da Central de Operação (coletas e entregas).
   Fica logo abaixo do cabeçalho colorido, discreta, sem competir com os cards. */
.central-col-busca { position:relative; display:flex; align-items:center; padding:10px 16px 0; }
.central-col-busca-ic { position:absolute; left:26px; font-size:.78rem; opacity:.55; pointer-events:none; }
.central-col-busca input {
  width:100%; padding:7px 28px 7px 30px; font-size:.82rem;
  border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:8px;
  background:var(--surface-2,rgba(255,255,255,.04)); color:inherit;
  transition:border-color .15s, background .15s;
}
.central-col-busca input::placeholder { color:var(--text-tertiary,#8b93a1); font-size:.78rem; }
.central-col-busca input:focus {
  outline:none; border-color:var(--accent,#ff6a00);
  background:var(--surface-1,rgba(255,255,255,.06));
}
.central-col-busca-x {
  position:absolute; right:22px; background:none; border:none; cursor:pointer;
  color:var(--text-tertiary,#8b93a1); font-size:.8rem; line-height:1; padding:4px;
}
.central-col-busca-x:hover { color:var(--text-primary,#e5e7eb); }
.central-col-contagem {
  font-size:.72rem; font-weight:700; opacity:.75; margin-left:6px;
  padding:1px 7px; border-radius:20px; background:rgba(128,128,128,.18);
}

.central-kpis { display:flex; gap:12px; flex:1; flex-wrap:wrap; }
.central-kpi { flex:1; min-width:150px; display:flex; align-items:center; gap:12px; border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; padding:12px 16px; background:var(--surface-1,rgba(255,255,255,.03)); }
.central-kpi-ic { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.central-kpi-laranja .central-kpi-ic { background:rgba(251,146,60,.15); }
.central-kpi-azul .central-kpi-ic { background:rgba(96,165,250,.15); }
.central-kpi-amarelo .central-kpi-ic { background:rgba(251,191,36,.15); }
.central-kpi-verde .central-kpi-ic { background:rgba(74,222,128,.15); }
.central-kpi-lbl { display:block; font-size:.74rem; color:var(--text-secondary,#9ca3af); }
.central-kpi-num { font-size:1.6rem; font-weight:800; }

.central-colunas { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
@media(max-width:980px){ .central-colunas{ grid-template-columns:1fr; } }
.central-col { border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:14px; padding:14px 16px; background:var(--surface-1,rgba(255,255,255,.02)); }
.central-col-cab { display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:.95rem; margin-bottom:12px; }
.central-col-coletas { color:#fb923c; }
.central-col-entregas { color:#60a5fa; }
.central-refresh { background:none; border:none; cursor:pointer; font-size:1rem; opacity:.6; }
.central-refresh:hover { opacity:1; }
.central-tabela { width:100%; border-collapse:collapse; font-size:.8rem; min-width:520px; }
.central-tabela thead th { text-align:left; font-size:.66rem; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted,#9ca3af); font-weight:700; padding:6px 8px; border-bottom:1px solid var(--border,rgba(255,255,255,.12)); white-space:nowrap; }
.central-tabela td { padding:8px; border-bottom:1px solid var(--border-soft,rgba(255,255,255,.05)); vertical-align:middle; }
.central-sub { font-size:.7rem; color:var(--text-tertiary,#6b7280); }
.central-status { font-size:.72rem; font-weight:600; white-space:nowrap; }
.central-status-laranja { color:#fb923c; }
.central-status-verde { color:#4ade80; }
.central-col-rodape { display:flex; justify-content:space-between; align-items:center; margin-top:12px; }
.central-btn { border:none; border-radius:9px; padding:10px 18px; font-weight:700; font-size:.84rem; color:#fff; cursor:pointer; }
.central-btn-laranja { background:#ff6a00; }
.central-btn-azul { background:#2563eb; }
.central-btn:hover { filter:brightness(1.1); }
.central-vazio { text-align:center; color:var(--text-secondary,#9ca3af); padding:1.5rem; font-size:.86rem; }

.central-aguardando { border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:14px; padding:14px 16px; background:var(--surface-1,rgba(255,255,255,.02)); margin-bottom:12px; }
.central-aguardando-cab { font-weight:800; font-size:.9rem; color:#fbbf24; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.central-badge { background:rgba(251,191,36,.2); color:#fbbf24; font-size:.72rem; padding:1px 8px; border-radius:999px; }
.central-aguardando-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.central-ag-card { border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:10px; padding:10px 12px; background:var(--surface-2,rgba(255,255,255,.03)); }
.central-ag-top { font-size:.78rem; margin-bottom:4px; }
.central-ag-tit { font-size:.82rem; font-weight:600; }
.central-ag-sub { font-size:.74rem; color:#fbbf24; margin-top:3px; }
.central-rodape { text-align:center; color:var(--text-tertiary,#6b7280); font-size:.8rem; margin-top:8px; }

/* Central — botões mini de ação */
.central-btn-mini { background:rgba(96,165,250,.15); color:#60a5fa; border:1px solid rgba(96,165,250,.35); border-radius:7px; padding:5px 9px; font-size:.72rem; font-weight:700; cursor:pointer; white-space:nowrap; }
.central-btn-mini:hover { background:rgba(96,165,250,.25); }
.central-btn-mini-verde { background:rgba(74,222,128,.15); color:#4ade80; border-color:rgba(74,222,128,.4); margin-top:8px; width:100%; }
.central-btn-mini-verde:hover { background:rgba(74,222,128,.25); }

/* Planejamento — dica da coluna corredores (proporcional) */
.plan-col-dica { font-size:.7rem; color:var(--text-tertiary,#6b7280); margin:-6px 0 10px; font-style:italic; }

/* Ação cancelar rota */
.jv-acao-cancelar { background:#dc2626; }

/* Planejamento — faixa de folgas/afastamentos */
.plan-folgas { border:1px solid rgba(251,191,36,.3); background:rgba(251,191,36,.06); border-radius:12px; padding:10px 14px; margin:12px 0; }
.plan-folgas-tit { font-size:.78rem; font-weight:700; color:#fbbf24; display:block; margin-bottom:8px; }
.plan-folgas-chips { display:flex; gap:8px; flex-wrap:wrap; }
.plan-folga-chip { display:inline-flex; align-items:center; gap:7px; border:1px solid; border-radius:999px; padding:4px 12px; font-size:.78rem; }
.plan-folga-data { color:var(--text-tertiary,#9ca3af); font-size:.72rem; }

/* Planejamento — filtro frota/terceiro no criar viagem */
.plan-vtipo { display:flex; gap:8px; flex-wrap:wrap; }
.plan-vtipo-btn { flex:1; min-width:90px; padding:8px 10px; border:1px solid var(--border,rgba(255,255,255,.15)); border-radius:8px; background:var(--surface-2,rgba(255,255,255,.03)); color:var(--text-secondary,#9ca3af); cursor:pointer; font-size:.8rem; font-weight:600; }
.plan-vtipo-btn:hover { border-color:rgba(255,106,0,.4); }
.plan-vtipo-btn.active { border-color:#ff6a00; background:rgba(255,106,0,.12); color:#ff6a00; }

/* ===== ÁREA COMERCIAL — Visão Global ===== */
.cg-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.cg-header h2 { margin:0; }
.cg-kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:20px; }
@media(max-width:900px){ .cg-kpis{ grid-template-columns:repeat(2,1fr); } }
.cg-kpi { border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; padding:16px; background:var(--surface-1,rgba(255,255,255,.03)); text-align:left; }
.cg-kpi-num { display:block; font-size:2rem; font-weight:800; line-height:1.1; }
.cg-kpi-lbl { font-size:.76rem; color:var(--text-secondary,#9ca3af); }
.cg-sec-tit { font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-secondary,#9ca3af); margin:20px 0 12px; }
.cg-corredores { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-bottom:20px; }
.cg-corr-card { border:1px solid var(--border,rgba(0,0,0,.1)); border-radius:12px; padding:14px; background:var(--surface-1,#14141a); }
.cg-corr-nome { font-weight:700; font-size:.9rem; }
.cg-corr-total { font-weight:800; font-size:1.1rem; margin:6px 0 10px; }
.cg-corr-detalhe { display:flex; flex-direction:column; gap:4px; font-size:.8rem; color:var(--text-secondary,#9ca3af); margin-bottom:10px; }
.cg-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.cg-corr-barra { display:flex; height:4px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.06); margin-top:4px; opacity:.75; }
.cg-corr-barra > div { height:100%; }
.cg-duplo { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:820px){ .cg-duplo{ grid-template-columns:1fr; } }
.cg-bloco { border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; padding:16px; background:var(--surface-1,rgba(255,255,255,.03)); }
.cg-bloco-tit { font-weight:700; font-size:.9rem; margin-bottom:12px; }
.cg-viagem-linha { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--border-soft,rgba(255,255,255,.05)); cursor:pointer; font-size:.84rem; }
.cg-viagem-linha:hover { background:rgba(255,106,0,.04); }
.cg-viagem-rota { font-weight:700; min-width:60px; }
.cg-viagem-corr { flex:1; color:var(--text-secondary,#9ca3af); }
.cg-viagem-ped { color:var(--text-secondary,#9ca3af); }
.cg-badge { font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:999px; }
.cg-badge-azul { background:rgba(37,99,235,.15); color:#2563eb; }
.cg-atencao { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:.85rem; }
.cg-at-ic { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.9rem; }

/* ===== ÁREA COMERCIAL — Pedidos + Rastreio ===== */
.cg-filtros { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:16px; padding:14px; border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; background:var(--surface-1,rgba(255,255,255,.02)); }
.cg-filtro { display:flex; flex-direction:column; gap:4px; }
.cg-filtro label { font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.3px; color:var(--text-tertiary,#6b7280); }
.cg-filtro input, .cg-filtro select { padding:7px 9px; border-radius:8px; border:1px solid var(--border,rgba(255,255,255,.15)); background:var(--surface-2,rgba(255,255,255,.03)); color:inherit; font-size:.82rem; }
.cg-filtro-btns { justify-content:flex-end; }
.cg-tabela-wrap { overflow-x:auto; border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; }
.cg-tabela { width:100%; border-collapse:collapse; font-size:.84rem; min-width:760px; }
.cg-tabela thead th { text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted,#9ca3af); font-weight:700; padding:10px; border-bottom:1px solid var(--border,rgba(255,255,255,.12)); white-space:nowrap; }
.cg-tabela td { padding:10px; border-bottom:1px solid var(--border-soft,rgba(255,255,255,.05)); }
.cg-tr { cursor:pointer; transition:background .12s; }
.cg-tr:hover { background:rgba(255,106,0,.05); }
.cg-corr-cel { color:var(--text-secondary,#9ca3af); font-size:.8rem; }
.cg-sub { color:var(--text-tertiary,#6b7280); font-size:.78rem; }
.cg-chevron { color:var(--text-tertiary,#6b7280); font-size:1.2rem; text-align:center; }
.cg-paginacao { display:flex; justify-content:space-between; align-items:center; margin-top:12px; }
.cg-pag-btns { display:flex; align-items:center; gap:10px; }
.cg-pag-btns button { width:32px; height:32px; border-radius:8px; border:1px solid var(--border,rgba(255,255,255,.15)); background:var(--surface-1,rgba(255,255,255,.03)); color:inherit; cursor:pointer; }
.cg-pag-btns button:disabled { opacity:.4; cursor:default; }
.cg-pag-atual { font-size:.85rem; font-weight:600; }

/* Rastreio lateral */
#cgRastreioOverlay { display:none; }
#cgRastreioOverlay.aberto { display:block; }
.cg-rastreio-bg { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9998; }
.cg-rastreio-painel { position:fixed; top:0; right:0; width:440px; max-width:94vw; height:100vh; overflow-y:auto; background:var(--surface-0,#14151a); border-left:1px solid var(--border,rgba(255,255,255,.1)); z-index:9999; padding:22px; box-shadow:-8px 0 32px rgba(0,0,0,.4); animation:cgSlideIn .22s ease; }
@keyframes cgSlideIn { from{ transform:translateX(100%); } to{ transform:translateX(0); } }
.cg-rastreio-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.cg-rastreio-head h3 { margin:0; font-size:1.3rem; }
.cg-rastreio-x { background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--text-secondary,#9ca3af); }
.cg-rastreio-dados { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px; border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; margin-bottom:20px; }
.cg-rd-lbl { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.3px; color:var(--text-tertiary,#6b7280); }
.cg-rd-val { font-size:.86rem; font-weight:600; }
.cg-rastreio-tit { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-secondary,#9ca3af); margin-bottom:14px; }
.cg-timeline { position:relative; padding-left:8px; }
.cg-tl-item { position:relative; padding-left:24px; padding-bottom:20px; border-left:2px solid var(--border,rgba(255,255,255,.15)); }
.cg-tl-item:last-child { border-left-color:transparent; }
.cg-tl-marker { position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:#22c55e; border:2px solid var(--surface-0,#14151a); }
.cg-tl-item.atual .cg-tl-marker { background:#2563eb; box-shadow:0 0 0 4px rgba(37,99,235,.2); }
.cg-tl-data { font-size:.74rem; color:var(--text-tertiary,#6b7280); }
.cg-tl-status { font-weight:700; font-size:.9rem; margin:2px 0; }
.cg-tl-obs { font-size:.8rem; color:var(--text-secondary,#9ca3af); }
.cg-tl-quem { font-size:.72rem; color:var(--text-tertiary,#6b7280); margin-top:2px; }
.cg-rastreio-status { margin-top:16px; padding:16px; border-radius:12px; background:rgba(37,99,235,.08); border:1px solid rgba(37,99,235,.2); }
.cg-rs-lbl { font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; color:var(--text-secondary,#9ca3af); margin-bottom:6px; }
.cg-rs-val { font-size:1rem; font-weight:700; }
@media(max-width:520px){ .cg-rastreio-painel{ width:100vw; } }

/* ===== ÁREA COMERCIAL — Viagens ===== */
.cg-viagens-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-bottom:20px; }
.cg-viagem-card { border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; padding:14px; background:var(--surface-1,rgba(255,255,255,.03)); cursor:pointer; transition:border-color .15s, background .15s; }
.cg-viagem-card:hover { border-color:rgba(255,106,0,.4); }
.cg-viagem-card.sel { border-color:#ff6a00; background:rgba(255,106,0,.06); }
.cg-vc-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.cg-vc-rota { font-weight:800; font-size:.95rem; }
.cg-vc-corr { font-size:.84rem; color:var(--text-secondary,#9ca3af); margin-bottom:10px; }
.cg-vc-info { display:flex; flex-direction:column; gap:4px; font-size:.82rem; }
.cg-vc-cegonha { margin-top:8px; font-size:.76rem; color:var(--text-tertiary,#6b7280); font-weight:600; }
.cg-viagem-detalhe { border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; padding:16px; background:var(--surface-1,rgba(255,255,255,.02)); }
.cg-vd-head { margin-bottom:14px; }
.cg-vd-tit { font-weight:700; font-size:1rem; }
.cg-vd-sub { font-size:.84rem; color:var(--text-secondary,#9ca3af); margin-top:2px; }

/* Overlay lateral da viagem (mesma mecânica do rastreio) */
#cgViagemOverlay { display:none; }
#cgViagemOverlay.aberto { display:block; }

/* Nova rota livre — paradas */
.rota-livre-paradas { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.rota-livre-parada { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:8px; background:var(--surface-2,rgba(255,255,255,.03)); }
.rlp-num { width:22px; height:22px; border-radius:50%; background:#ff6a00; color:#fff; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; flex:0 0 auto; }
.rlp-cidade { flex:1; font-weight:600; font-size:.86rem; }
.rlp-acoes { display:flex; gap:4px; }
.rlp-acoes button { width:26px; height:26px; border:1px solid var(--border,rgba(255,255,255,.15)); border-radius:6px; background:var(--surface-1,rgba(255,255,255,.03)); color:inherit; cursor:pointer; font-size:.7rem; }
.rlp-acoes button:disabled { opacity:.3; cursor:default; }

/* Botão novo corredor ao lado do título */
.plan-col-tit-corr { display:flex; justify-content:space-between; align-items:center; }
.plan-novo-corr { background:#ff6a00; color:#fff; border:none; border-radius:7px; padding:4px 10px; font-size:.74rem; font-weight:700; cursor:pointer; }
.plan-novo-corr:hover { filter:brightness(1.1); }

/* Planejamento — datas do pedido */
.plan-pedido-datas { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; font-size:.72rem; color:var(--text-tertiary,#9ca3af); }
.plan-pedido-datas span { white-space:nowrap; }

/* Viagens comercial — concluídas (recolhível) */
.cg-concluidas { border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; margin-top:20px; background:var(--surface-1,rgba(255,255,255,.02)); overflow:hidden; }
.cg-concluidas-head { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; cursor:pointer; font-weight:700; font-size:.9rem; }
.cg-concluidas-head:hover { background:rgba(255,255,255,.02); }
.cg-conc-badge { background:rgba(34,197,94,.15); color:#22c55e; font-size:.72rem; padding:1px 8px; border-radius:999px; margin-left:6px; }
.cg-conc-filtros { display:flex; gap:12px; padding:0 16px 12px; flex-wrap:wrap; align-items:flex-end; }

/* Visão Global — KPI clicável e discreto */
.cg-kpi-click { cursor:pointer; transition:border-color .15s, transform .1s; }
.cg-kpi-click:hover { border-color:rgba(255,106,0,.4); transform:translateY(-1px); }
.cg-kpi-discreto { opacity:.62; }
.cg-kpi-discreto:hover { opacity:1; }
.cg-kpi-num-mini { display:block; font-size:1.25rem; font-weight:700; line-height:1.1; color:#22c55e; }
#cgKpiOverlay { display:none; }
#cgKpiOverlay.aberto { display:block; }
.cg-kpi-lista { display:flex; flex-direction:column; gap:8px; }
.cg-kpi-item { border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:10px; padding:10px 12px; cursor:pointer; transition:border-color .12s; }
.cg-kpi-item:hover { border-color:rgba(255,106,0,.45); }
.cg-ki-top { font-size:.88rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cg-ki-status { margin-left:auto; }
.cg-ki-sub { font-size:.8rem; color:var(--text-secondary,#9ca3af); margin-top:3px; }
.cg-ki-data { font-size:.74rem; color:var(--text-tertiary,#6b7280); margin-top:4px; }

/* Planejamento — mover pedido para corredor (busca) */
.plan-pedido-acoes { margin-top:8px; }
.plan-mover-btn { width:100%; padding:5px 10px; border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:7px; background:transparent; color:var(--text-secondary,#9ca3af); font-size:.72rem; font-weight:500; cursor:pointer; transition:color .12s, border-color .12s; }
.plan-mover-btn:hover { color:#ff6a00; border-color:rgba(255,106,0,.4); background:rgba(255,106,0,.06); }
.plan-busca-corr-item { display:flex; flex-direction:column; gap:2px; text-align:left; padding:10px 12px; border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:9px; background:var(--surface-2,rgba(255,255,255,.03)); color:inherit; cursor:pointer; transition:border-color .12s, background .12s; }
.plan-busca-corr-item:hover { border-color:#ff6a00; background:rgba(255,106,0,.08); }
.plan-busca-corr-item.atual { border-color:rgba(34,197,94,.5); }
.pbc-nome { font-weight:700; font-size:.88rem; }
.pbc-rota { font-size:.76rem; color:var(--text-secondary,#9ca3af); }

/* Item 3 — autocomplete de cliente nos endereços */
.cli-auto-wrap { position:relative; margin-bottom:6px; }
.cli-auto-input { width:100%; padding:7px 10px; border-radius:8px; border:1px dashed rgba(255,106,0,.4); background:rgba(255,106,0,.04); color:inherit; font-size:.82rem; }
.cli-auto-input:focus { border-style:solid; border-color:#ff6a00; outline:none; }
.cli-auto-lista { position:absolute; top:100%; left:0; right:0; z-index:50; background:var(--surface-0,#14151a); border:1px solid var(--border,rgba(255,255,255,.15)); border-radius:9px; margin-top:3px; max-height:240px; overflow-y:auto; display:none; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.cli-auto-lista.aberta { display:block; }
.cli-auto-item { padding:8px 11px; cursor:pointer; border-bottom:1px solid var(--border-soft,rgba(255,255,255,.05)); }
.cli-auto-item:hover { background:rgba(255,106,0,.1); }
.cai-nome { font-weight:600; font-size:.85rem; }
.cai-end { font-size:.75rem; color:var(--text-secondary,#9ca3af); }
.cli-auto-vazio { padding:10px; font-size:.8rem; color:var(--text-tertiary,#6b7280); text-align:center; }

/* Item 6 — bloco carreta (secundário) */
.carreta-bloco { margin:8px 0 16px; border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:10px; background:var(--surface-1,rgba(255,255,255,.02)); }
.carreta-bloco summary { cursor:pointer; padding:12px 14px; font-size:.85rem; font-weight:600; color:var(--text-secondary,#9ca3af); user-select:none; }
.carreta-bloco summary:hover { color:inherit; }
.carreta-bloco[open] summary { border-bottom:1px solid var(--border,rgba(255,255,255,.08)); color:inherit; }
.carreta-bloco-conteudo { padding:12px 14px; }

/* Item 5 — botão enviar fiscal na viagem */
.jv-acao-fiscal { background:#0891b2; }

/* Item 4 — corredor clicável + painel de pedidos separados */
.cg-corr-click { cursor:pointer; transition:border-color .15s, transform .1s; }
.cg-corr-click:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.15); }
.cg-corr-top { display:flex; justify-content:space-between; align-items:center; }
.cg-corr-chevron { color:var(--text-tertiary,#6b7280); font-size:1.3rem; line-height:1; }
.cg-corr-sec { margin-bottom:20px; }
.cg-corr-sec-tit { font-size:.85rem; font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.cg-corr-sec-num { background:rgba(255,255,255,.08); border-radius:999px; padding:1px 9px; font-size:.75rem; }
.cg-corr-sec .cg-kpi-item { margin-bottom:8px; }

/* ===== Área comercial — cores explícitas por tema (evita inconsistência claro/escuro) ===== */
/* MODO ESCURO (padrão): cards escuros, texto claro */
#visaoGlobal .cg-kpi, #visaoGlobal .cg-corr-card, #visaoGlobal .cg-bloco,
#comercialPedidos .cg-kpi, #comercialViagens .cg-kpi, #comercialViagens .cg-viagem-card {
  background:#14141a; border-color:rgba(255,255,255,.1);
}
#visaoGlobal .cg-kpi-num, #comercialPedidos .cg-kpi-num, #comercialViagens .cg-kpi-num { color:#f0f0f2; }
#visaoGlobal .cg-corr-nome, #comercialViagens .cg-vc-rota { color:#f0f0f2; }

/* MODO CLARO: cards brancos, texto escuro */
[data-tema="claro"] #visaoGlobal .cg-kpi,
[data-tema="claro"] #visaoGlobal .cg-corr-card,
[data-tema="claro"] #visaoGlobal .cg-bloco,
[data-tema="claro"] #comercialPedidos .cg-kpi,
[data-tema="claro"] #comercialViagens .cg-kpi,
[data-tema="claro"] #comercialViagens .cg-viagem-card {
  background:#ffffff; border-color:#e2e4e9;
}
[data-tema="claro"] #visaoGlobal .cg-kpi-num,
[data-tema="claro"] #comercialPedidos .cg-kpi-num,
[data-tema="claro"] #comercialViagens .cg-kpi-num { color:#1a1c20; }
[data-tema="claro"] #visaoGlobal .cg-corr-nome,
[data-tema="claro"] #comercialViagens .cg-vc-rota { color:#1a1c20; }
[data-tema="claro"] #visaoGlobal .cg-kpi-lbl,
[data-tema="claro"] #visaoGlobal .cg-corr-detalhe,
[data-tema="claro"] #comercialPedidos .cg-kpi-lbl,
[data-tema="claro"] #comercialViagens .cg-kpi-lbl { color:#4d5058; }




/* Aguardando transbordo — aba e cards */
.plan-corr-transbordo { border-color:rgba(168,85,247,.4); background:rgba(168,85,247,.06); }
.plan-corr-transbordo.sel { border-color:#a855f7; background:rgba(168,85,247,.12); }
.plan-corr-transbordo .plan-corr-nome { color:#a855f7; }
.plan-transb-card { border:1px solid rgba(168,85,247,.25); border-radius:10px; padding:12px; margin-bottom:10px; background:var(--surface-1,rgba(255,255,255,.02)); }
.plan-transb-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.plan-transb-selo { font-size:.72rem; font-weight:700; color:#a855f7; background:rgba(168,85,247,.12); padding:2px 8px; border-radius:999px; white-space:nowrap; }
.plan-transb-cliente { font-size:.82rem; color:var(--text-secondary,#9ca3af); margin:2px 0 8px; }
.plan-transb-proxima { margin-top:10px; padding:10px; border-radius:8px; background:rgba(168,85,247,.06); border:1px dashed rgba(168,85,247,.35); }
.plan-transb-proxima-lbl { font-size:.66rem; font-weight:700; letter-spacing:.5px; color:#a855f7; }
.plan-transb-proxima-txt { font-size:.84rem; margin:4px 0 8px; }
.plan-transb-btn { width:100%; padding:8px; border:none; border-radius:8px; background:#a855f7; color:#fff; font-weight:700; font-size:.8rem; cursor:pointer; }
.plan-transb-btn:hover { filter:brightness(1.1); }

/* Linha do tempo do pedido (transbordo) */
.ltp { display:flex; align-items:flex-start; gap:0; margin:8px 0; overflow-x:auto; padding:6px 0; }
.ltp-item { display:flex; flex-direction:column; align-items:center; min-width:64px; position:relative; }
.ltp-dot { width:12px; height:12px; border-radius:50%; background:var(--surface-3,#333); border:2px solid var(--border,rgba(255,255,255,.2)); }
.ltp-item.feito .ltp-dot { background:#22c55e; border-color:#22c55e; }
.ltp-item.atual .ltp-dot { background:#a855f7; border-color:#a855f7; box-shadow:0 0 0 4px rgba(168,85,247,.2); }
.ltp-nome { font-size:.68rem; text-align:center; margin-top:4px; max-width:70px; line-height:1.2; }
.ltp-aqui { font-size:.6rem; color:#a855f7; font-weight:700; margin-top:2px; }
.ltp-linha { flex:1; min-width:20px; height:2px; background:var(--border,rgba(255,255,255,.15)); margin-top:5px; }

/* Modal forma de entrega */
.forma-entrega-opt { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:14px; margin-bottom:10px; border:1px solid var(--border,rgba(255,255,255,.15)); border-radius:10px; background:var(--surface-2,rgba(255,255,255,.03)); color:inherit; cursor:pointer; transition:border-color .15s, background .15s; }
.forma-entrega-opt:hover { border-color:#ff6a00; background:rgba(255,106,0,.06); }
.feo-ic { font-size:1.6rem; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); border-radius:10px; flex:0 0 auto; }
.feo-tit { font-weight:700; font-size:.9rem; }
.feo-sub { font-size:.78rem; color:var(--text-secondary,#9ca3af); }

/* Ponto 2 — selos do pedido (transbordado / CTe emitida) */
.selos-pedido { display:inline-flex; gap:4px; flex-wrap:wrap; vertical-align:middle; }
.selo-pedido { display:inline-block; font-size:.66rem; font-weight:700; padding:1px 7px; border-radius:999px; white-space:nowrap; line-height:1.5; }
.selo-transb { background:rgba(168,85,247,.15); color:#a855f7; border:1px solid rgba(168,85,247,.4); }
.selo-cte { background:rgba(34,197,94,.15); color:#22c55e; border:1px solid rgba(34,197,94,.4); }

/* Botão romaneio na viagem em andamento */
.jv-acao-romaneio { background:#7c3aed; }

/* Romaneio — blocos de carro com chips de pátio */
.rm-carros-lista { display:flex; flex-direction:column; gap:10px; }
.rm-carro { border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:10px; padding:12px; background:var(--surface-2,rgba(255,255,255,.02)); }
.rm-carro-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.rm-patio-check { display:inline-flex; align-items:center; gap:6px; font-size:.85rem; cursor:pointer; margin-bottom:8px; }
.rm-patio-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.rm-patio-chip { font-size:.76rem; padding:4px 10px; border-radius:999px; border:1px solid var(--border,rgba(255,255,255,.2)); background:transparent; color:inherit; cursor:pointer; transition:all .12s; }
.rm-patio-chip:hover { border-color:#ff6a00; color:#ff6a00; }
.rm-patio-chip.sel { background:#ff6a00; border-color:#ff6a00; color:#fff; font-weight:700; }
.rm-local-input { width:100%; padding:7px 10px; border-radius:8px; border:1px solid var(--border,rgba(255,255,255,.15)); background:var(--surface-1,rgba(255,255,255,.03)); color:inherit; font-size:.85rem; }
.rm-local-hint { font-size:.72rem; color:var(--text-tertiary,#6b7280); margin-top:4px; }

/* Romaneio Opção C — dropdown de pátio */
.rm-onde-linha { margin-bottom:8px; }
.rm-patio-select { width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--border,rgba(255,255,255,.18)); background:var(--surface-1,rgba(255,255,255,.03)); color:inherit; font-size:.85rem; }

/* Selo de CTe no card de viagem (fiscal/comercial) */
.cg-vc-selos { margin-top:6px; }
.cg-cte-badge { display:inline-block; font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:999px; }
.cg-cte-badge.cte-ok { background:rgba(34,197,94,.15); color:#22c55e; border:1px solid rgba(34,197,94,.4); }
.cg-cte-badge.cte-parcial { background:rgba(234,179,8,.15); color:#eab308; border:1px solid rgba(234,179,8,.4); }
.cg-cte-badge.cte-pend { background:rgba(148,163,184,.12); color:#94a3b8; border:1px solid rgba(148,163,184,.3); }

/* Romaneio — chips (Opção B) + toast de confirmação */
.rm-patio-lbl { font-size:.78rem; color:var(--text-secondary,#9ca3af); margin-bottom:6px; }
.rm-patio-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.rm-patio-chip { font-size:.76rem; padding:4px 10px; border-radius:999px; border:1px solid var(--border,rgba(255,255,255,.2)); background:transparent; color:inherit; cursor:pointer; transition:all .12s; }
.rm-patio-chip:hover { border-color:#ff6a00; color:#ff6a00; }
.rm-patio-chip.sel { background:#ff6a00; border-color:#ff6a00; color:#fff; font-weight:700; }
.rm-toast { position:fixed; top:24px; left:50%; transform:translateX(-50%); z-index:100000; background:#16a34a; color:#fff; font-weight:700; font-size:.92rem; padding:12px 22px; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.35); animation:rmToastIn .3s ease; }
.rm-toast.sai { animation:rmToastOut .4s ease forwards; }
@keyframes rmToastIn { from { opacity:0; transform:translate(-50%,-16px); } to { opacity:1; transform:translate(-50%,0); } }
@keyframes rmToastOut { to { opacity:0; transform:translate(-50%,-16px); } }

/* Item 5 — Área Fiscal mais bonita */
.fisc-card { border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:14px; padding:16px 18px; margin-bottom:14px; background:var(--surface-1,rgba(255,255,255,.02)); }
.fisc-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.fisc-cegonha { font-weight:700; font-size:1rem; }
.fisc-rota-nome { color:var(--text-secondary,#9ca3af); font-weight:500; font-size:.86rem; margin-left:6px; }
.fisc-status { font-size:.72rem; font-weight:700; padding:2px 10px; border-radius:999px; }
.fisc-motorista { font-size:.82rem; color:var(--text-secondary,#9ca3af); margin-top:4px; }
.fisc-docs-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
@media (max-width:640px){ .fisc-docs-grid { grid-template-columns:1fr; } }
.fisc-doc-box { border:1px solid var(--border-soft,rgba(255,255,255,.07)); border-radius:10px; padding:12px; background:var(--surface-2,rgba(255,255,255,.02)); }
.fisc-doc-tit { font-weight:700; font-size:.85rem; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.fisc-badge { background:#22c55e; color:#fff; font-size:.68rem; padding:1px 7px; border-radius:999px; }
.fisc-upload { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.fisc-file { font-size:.76rem; flex:1; min-width:120px; }
.fisc-arquivos { margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.fisc-arq { display:flex; align-items:center; gap:8px; padding:4px 8px; background:var(--surface-1,rgba(255,255,255,.03)); border-radius:6px; }
.fisc-arq-link { color:#60a5fa; font-size:.78rem; text-decoration:none; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fisc-arq-del { background:none; border:none; cursor:pointer; font-size:.8rem; opacity:.6; }
.fisc-arq-del:hover { opacity:1; }
.fisc-vazio { font-size:.75rem; color:var(--text-tertiary,#6b7280); margin-top:8px; font-style:italic; }

/* Item 1 — aguardando aprovação */
.plan-corr-aprovacao { border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.06); }
.plan-corr-aprovacao.sel { border-color:#f59e0b; background:rgba(245,158,11,.12); }
.plan-corr-aprovacao .plan-corr-nome { color:#f59e0b; }
.plan-aprov-card { border:1px solid rgba(245,158,11,.25); border-radius:10px; padding:12px; margin-bottom:10px; background:var(--surface-1,rgba(255,255,255,.02)); }
.plan-aprov-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.plan-aprov-selo { font-size:.72rem; font-weight:700; color:#f59e0b; background:rgba(245,158,11,.12); padding:2px 8px; border-radius:999px; white-space:nowrap; }
.plan-aprov-sub { font-size:.82rem; color:var(--text-secondary,#9ca3af); margin:2px 0 8px; }
.plan-aprov-acoes { margin-top:8px; }
.plan-aprov-btn { width:100%; padding:8px; border:none; border-radius:8px; background:#22c55e; color:#fff; font-weight:700; font-size:.8rem; cursor:pointer; }
.plan-aprov-btn:hover { filter:brightness(1.1); }
.plan-aprov-hint { font-size:.72rem; color:var(--text-tertiary,#6b7280); margin-top:6px; text-align:center; }
.aprov-opt { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:14px; margin-bottom:10px; border:1px solid var(--border,rgba(255,255,255,.15)); border-radius:10px; background:var(--surface-2,rgba(255,255,255,.03)); color:inherit; cursor:pointer; transition:border-color .15s, background .15s; }
.aprov-opt:hover { border-color:#ff6a00; background:rgba(255,106,0,.06); }
.aprov-ic { font-size:1.5rem; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:10px; flex:0 0 auto; }
.aprov-tit { font-weight:700; font-size:.9rem; }
.aprov-sub { font-size:.78rem; color:var(--text-secondary,#9ca3af); }

/* Item 9 — ações no rastreio comercial */
.cg-rastreio-acoes { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px; }
.cg-acao-btn { padding:6px 12px; border:1px solid var(--border,rgba(255,255,255,.15)); border-radius:8px; background:var(--surface-2,rgba(255,255,255,.03)); color:inherit; font-size:.8rem; font-weight:600; cursor:pointer; transition:all .12s; }
.cg-acao-btn:hover { border-color:#ff6a00; color:#ff6a00; }
.cg-acao-del:hover { border-color:#ef4444; color:#ef4444; background:rgba(239,68,68,.08); }

/* Item 9 — botões de ação na linha da tabela de pedidos */
.cg-acoes-cel { white-space:nowrap; }
.cg-acao-mini { background:none; border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:6px; padding:3px 7px; cursor:pointer; font-size:.82rem; margin:0 1px; transition:all .12s; }
.cg-acao-mini:hover { border-color:#ff6a00; background:rgba(255,106,0,.08); }
.cg-acao-mini-del:hover { border-color:#ef4444; background:rgba(239,68,68,.1); }

/* Romaneio — chips de pátio recolhíveis */
.rm-patio-det { margin-bottom:8px; }
.rm-patio-det summary { cursor:pointer; font-size:.8rem; color:var(--text-secondary,#9ca3af); padding:4px 0; user-select:none; }
.rm-patio-det summary:hover { color:#ff6a00; }
.rm-patio-det[open] summary { color:inherit; margin-bottom:6px; }

/* Item 4 — card fiscal minimizável */
.fisc-card-det { padding:0; overflow:hidden; }
.fisc-card-summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; cursor:pointer; user-select:none; flex-wrap:wrap; }
.fisc-card-summary:hover { background:var(--surface-2,rgba(255,255,255,.02)); }
.fisc-card-det[open] .fisc-card-summary { border-bottom:1px solid var(--border,rgba(255,255,255,.08)); }
.fisc-sum-esq { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fisc-sum-mot { font-size:.82rem; color:var(--text-secondary,#9ca3af); }
.fisc-sum-dir { display:flex; align-items:center; gap:8px; }
.fisc-sum-badge { font-size:.72rem; background:rgba(96,165,250,.15); color:#60a5fa; padding:2px 8px; border-radius:999px; font-weight:700; }
.fisc-card-corpo { padding:16px 18px; }

/* Item 3 — ações do corredor */
.corredor-acoes { display:flex; gap:6px; flex-shrink:0; }

/* Cliente no card do romaneio */
.rm-carro-cliente { font-size:.82rem; color:var(--text-secondary,#9ca3af); margin:-2px 0 8px; }

/* ===== HISTÓRICO DE CARGAS — master-detail ===== */
.histv-filtros { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.histv-busca { flex:1; min-width:220px; padding:8px 12px; border-radius:8px; border:1px solid var(--border,rgba(255,255,255,.15)); background:var(--surface-1,rgba(255,255,255,.03)); color:inherit; font-size:.85rem; }
.histv-fil { width:150px; padding:8px 10px; border-radius:8px; border:1px solid var(--border,rgba(255,255,255,.15)); background:var(--surface-1,rgba(255,255,255,.03)); color:inherit; font-size:.82rem; }
.hist-data { font-size:.78rem; color:var(--text-secondary,#9ca3af); display:flex; align-items:center; gap:4px; }
.hist-data input { padding:6px 8px; border-radius:6px; border:1px solid var(--border,rgba(255,255,255,.15)); background:var(--surface-1,rgba(255,255,255,.03)); color:inherit; font-size:.8rem; }

.histv-layout { display:grid; grid-template-columns:300px 1fr; gap:16px; align-items:start; }
@media (max-width:900px){ .histv-layout { grid-template-columns:1fr; } }

.histv-lista { display:flex; flex-direction:column; gap:10px; }
.histv-lista-cab { font-size:.72rem; font-weight:700; letter-spacing:.5px; color:var(--text-muted,#9ca3af); padding:4px 2px; }
.histv-card { border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; padding:12px 14px; cursor:pointer; background:var(--surface-1,rgba(255,255,255,.02)); transition:all .12s; }
.histv-card:hover { border-color:rgba(255,106,0,.4); }
.histv-card.sel { border-color:#ff6a00; border-width:2px; background:rgba(255,106,0,.04); }
.histv-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.histv-card-id { font-weight:800; font-size:1.05rem; color:#ff6a00; }
.histv-badge { font-size:.62rem; font-weight:700; padding:2px 8px; border-radius:999px; letter-spacing:.3px; }
.histv-st-ok { background:rgba(34,197,94,.15); color:#22c55e; }
.histv-st-viagem { background:rgba(37,99,235,.15); color:#3b82f6; }
.histv-st-aguard { background:rgba(168,85,247,.15); color:#a855f7; }
.histv-card-lin { font-size:.82rem; margin-bottom:3px; }
.histv-card-rota { font-size:.82rem; color:var(--text-secondary,#9ca3af); margin-bottom:3px; }
.histv-card-mot { font-size:.76rem; color:var(--text-tertiary,#6b7280); margin-bottom:8px; }
.histv-card-rod { display:flex; justify-content:space-between; align-items:center; padding-top:8px; border-top:1px solid var(--border-soft,rgba(255,255,255,.06)); }
.histv-card-total { font-weight:700; color:#22c55e; font-size:.92rem; }
.histv-vermais { width:100%; padding:10px; border:1px dashed var(--border,rgba(255,255,255,.2)); border-radius:10px; background:transparent; color:var(--text-secondary,#9ca3af); cursor:pointer; font-size:.82rem; font-weight:600; }
.histv-vermais:hover { border-color:#ff6a00; color:#ff6a00; }

.histv-detalhe { border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:14px; padding:18px; background:var(--surface-1,rgba(255,255,255,.02)); min-height:400px; }
.histv-det-cab { display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start; padding-bottom:16px; border-bottom:1px solid var(--border,rgba(255,255,255,.08)); }
.histv-det-vnum { display:flex; flex-direction:column; gap:4px; }
.histv-det-hash { font-size:.7rem; color:var(--text-muted,#9ca3af); font-weight:700; }
.histv-det-num { font-size:2rem; font-weight:800; color:#ff6a00; line-height:1; }
.histv-det-info { display:flex; gap:22px; flex-wrap:wrap; flex:1; }
.histv-di { display:flex; flex-direction:column; gap:3px; }
.histv-di-lbl { font-size:.66rem; color:var(--text-muted,#9ca3af); font-weight:700; letter-spacing:.3px; }
.histv-di-val { font-size:.86rem; font-weight:600; }
.histv-resumo { background:var(--surface-2,rgba(255,255,255,.03)); border:1px solid var(--border-soft,rgba(255,255,255,.07)); border-radius:12px; padding:12px 16px; }
.histv-resumo-tit { font-size:.66rem; font-weight:700; color:var(--text-muted,#9ca3af); letter-spacing:.4px; margin-bottom:8px; }
.histv-resumo-grid { display:flex; gap:18px; }
.histv-rz { display:flex; flex-direction:column; align-items:center; gap:2px; }
.histv-rz strong { font-size:1.1rem; font-weight:800; }
.histv-rz span { font-size:.6rem; color:var(--text-muted,#9ca3af); font-weight:700; letter-spacing:.3px; }
.histv-rz-fat strong { color:#22c55e; }
.histv-rz-mot strong { color:#f59e0b; }
.histv-rz-res strong { color:#3b82f6; }

.histv-abas { display:flex; gap:4px; flex-wrap:wrap; margin:16px 0; border-bottom:1px solid var(--border,rgba(255,255,255,.08)); }
.histv-aba { padding:10px 14px; background:none; border:none; border-bottom:2px solid transparent; color:var(--text-secondary,#9ca3af); font-size:.78rem; font-weight:700; letter-spacing:.3px; cursor:pointer; }
.histv-aba:hover { color:inherit; }
.histv-aba.sel { color:#ff6a00; border-bottom-color:#ff6a00; }

.histv-sec-tit { font-size:.72rem; font-weight:700; color:var(--text-muted,#9ca3af); letter-spacing:.4px; margin-bottom:10px; }
.histv-tab { width:100%; border-collapse:collapse; font-size:.8rem; }
.histv-tab thead th { text-align:left; font-size:.64rem; text-transform:uppercase; letter-spacing:.3px; color:var(--text-muted,#9ca3af); font-weight:700; padding:6px 8px; border-bottom:1px solid var(--border,rgba(255,255,255,.1)); }
.histv-tab td { padding:8px; border-bottom:1px solid var(--border-soft,rgba(255,255,255,.05)); }
.histv-ok { color:#22c55e; font-weight:600; font-size:.76rem; }
.histv-pend { color:var(--text-muted,#9ca3af); }
.histv-tab-total { display:flex; justify-content:space-between; align-items:center; padding:12px 8px 4px; font-size:.85rem; }
.histv-tab-total strong { font-size:1.05rem; color:#22c55e; }
.histv-rodape-info { margin-top:16px; padding:10px 14px; background:rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.2); border-radius:8px; font-size:.78rem; color:var(--text-secondary,#9ca3af); }

/* Histórico — Linha do tempo */
.histv-tl { display:flex; flex-direction:column; }
.histv-tl-item { display:grid; grid-template-columns:52px 28px 1fr; gap:10px; }
.histv-tl-data { font-size:.72rem; color:var(--text-muted,#9ca3af); text-align:right; padding-top:2px; }
.histv-tl-data span { font-size:.7rem; }
.histv-tl-linha { display:flex; flex-direction:column; align-items:center; }
.histv-tl-dot { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.8rem; flex-shrink:0; z-index:1; }
.histv-tl-item:not(:last-child) .histv-tl-linha::after { content:''; width:2px; flex:1; background:var(--border,rgba(255,255,255,.12)); margin:2px 0; }
.ev-verde { background:rgba(34,197,94,.15); }
.ev-azul { background:rgba(59,130,246,.15); }
.ev-roxo { background:rgba(168,85,247,.15); }
.ev-cinza { background:rgba(148,163,184,.15); }
.histv-tl-conteudo { padding-bottom:16px; }
.histv-tl-tit { font-weight:700; font-size:.85rem; }
.histv-tl-ped { font-size:.7rem; color:#ff6a00; font-weight:600; }
.histv-tl-obs { font-size:.8rem; color:var(--text-secondary,#9ca3af); margin-top:1px; }
.histv-tl-quem { font-size:.72rem; color:var(--text-tertiary,#6b7280); margin-top:2px; }

/* Histórico — Conferência e documentos */
.histv-conf { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:700px){ .histv-conf { grid-template-columns:1fr; } }
.histv-donut-wrap { display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.histv-donut { width:100px; height:100px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.histv-donut-centro { width:70px; height:70px; border-radius:50%; background:var(--surface-1,#1a1c20); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.histv-donut-centro strong { font-size:1.4rem; font-weight:800; color:#22c55e; }
.histv-donut-centro span { font-size:.66rem; color:var(--text-muted,#9ca3af); }
.histv-donut-leg { font-size:.8rem; display:flex; flex-direction:column; gap:6px; }
.histv-dot-v, .histv-dot-c { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }
.histv-dot-v { background:#22c55e; }
.histv-dot-c { background:rgba(148,163,184,.4); }
.histv-conf-status { padding:12px 14px; border-radius:10px; font-weight:700; font-size:.9rem; text-align:center; }
.histv-conf-status span { font-weight:400; font-size:.78rem; }
.histv-conf-status.ok { background:rgba(34,197,94,.1); color:#22c55e; border:1px solid rgba(34,197,94,.3); }
.histv-conf-status.pend { background:rgba(245,158,11,.1); color:#f59e0b; border:1px solid rgba(245,158,11,.3); }
.histv-conf-pend-item { font-size:.78rem; color:#f59e0b; padding:3px 0; }
.histv-docs { display:flex; flex-direction:column; gap:8px; }
.histv-doc-lin { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:var(--surface-2,rgba(255,255,255,.03)); border:1px solid var(--border-soft,rgba(255,255,255,.06)); border-radius:8px; font-size:.82rem; }
.histv-doc-ver { font-size:.72rem; font-weight:700; color:#3b82f6; background:none; border:1px solid rgba(59,130,246,.4); border-radius:6px; padding:3px 12px; cursor:pointer; text-decoration:none; }
.histv-doc-ver:hover { background:rgba(59,130,246,.1); }
.histv-doc-arq { padding:5px 0; font-size:.8rem; }
.histv-doc-arq a { color:#60a5fa; text-decoration:none; }

/* Histórico — aba Financeiro */
.histv-fin { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.histv-fin-full { grid-column:1 / -1; }
@media (max-width:700px){ .histv-fin { grid-template-columns:1fr; } }
.histv-fin-status { display:flex; align-items:center; gap:12px; padding:16px; border-radius:12px; background:var(--surface-2,rgba(255,255,255,.03)); border:1px solid var(--border-soft,rgba(255,255,255,.07)); }
.histv-fin-status-ic { font-size:2rem; }
.histv-fin-status-lbl { font-weight:800; font-size:1.05rem; }
.histv-fin-status.histv-st-ok .histv-fin-status-lbl { color:#22c55e; }
.histv-fin-status.histv-st-viagem .histv-fin-status-lbl { color:#3b82f6; }
.histv-fin-status.histv-st-aguard .histv-fin-status-lbl { color:#a855f7; }
.histv-fin-status-sub { font-size:.8rem; color:var(--text-secondary,#9ca3af); margin-top:2px; }
.histv-fin-linha { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--border-soft,rgba(255,255,255,.05)); font-size:.86rem; }
.histv-fin-resultado { border-bottom:none; border-top:2px solid var(--border,rgba(255,255,255,.12)); margin-top:4px; padding-top:12px; font-weight:700; }
.v-verde { color:#22c55e; }
.v-laranja { color:#f59e0b; }
.v-azul { color:#3b82f6; }
.histv-fin-aviso, .histv-fin-nota { font-size:.76rem; color:#f59e0b; margin-top:10px; padding:8px 10px; background:rgba(245,158,11,.08); border-radius:6px; }
.histv-fin-nota { color:var(--text-secondary,#9ca3af); background:rgba(148,163,184,.08); }

/* Histórico — botão e relatório consolidado */
.histv-btn-relatorio { padding:8px 14px; border-radius:8px; border:1px solid #ff6a00; background:rgba(255,106,0,.08); color:#ff6a00; font-weight:700; font-size:.82rem; cursor:pointer; white-space:nowrap; }
.histv-btn-relatorio:hover { background:#ff6a00; color:#fff; }
.histrelat-overlay { position:fixed; inset:0; z-index:100060; display:flex; align-items:center; justify-content:center; }
.histrelat-bg { position:absolute; inset:0; background:rgba(0,0,0,.6); }
.histrelat-painel { position:relative; background:var(--surface-1,#14141a); border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:16px; width:94%; max-width:1100px; max-height:90vh; overflow:auto; padding:22px; }
.histrelat-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.histrelat-head h2 { margin:0; }
.histrelat-head-acoes { display:flex; gap:8px; align-items:center; }
.histrelat-x { background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--text-secondary,#9ca3af); }
.histrelat-totais { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:18px; }
@media (max-width:800px){ .histrelat-totais { grid-template-columns:repeat(3,1fr); } }
.histrelat-tz { background:var(--surface-2,rgba(255,255,255,.03)); border:1px solid var(--border-soft,rgba(255,255,255,.07)); border-radius:10px; padding:12px; text-align:center; }
.histrelat-tz strong { display:block; font-size:1.2rem; font-weight:800; }
.histrelat-tz span { font-size:.66rem; color:var(--text-muted,#9ca3af); font-weight:700; letter-spacing:.3px; }
.histrelat-tabwrap { overflow-x:auto; }
.histrelat-tab { width:100%; border-collapse:collapse; font-size:.82rem; min-width:800px; }
.histrelat-tab thead th { text-align:left; font-size:.66rem; text-transform:uppercase; letter-spacing:.3px; color:var(--text-muted,#9ca3af); font-weight:700; padding:8px; border-bottom:1px solid var(--border,rgba(255,255,255,.12)); position:sticky; top:0; background:var(--surface-1,#14141a); }
.histrelat-tab td { padding:8px; border-bottom:1px solid var(--border-soft,rgba(255,255,255,.05)); }
.histrelat-tab tbody tr:hover { background:var(--surface-2,rgba(255,255,255,.02)); }

/* Cidade destacada no autocomplete de cliente */
.cai-cidade { font-size:.75rem; color:#ff6a00; font-weight:600; margin-left:6px; }

/* Planejamento — card de grupo (múltiplos carros do mesmo pedido) */
.plan-pedido-grupo { border-left:3px solid #ff6a00; }
.plan-grupo-badge { background:rgba(255,106,0,.15); color:#ff6a00; font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:999px; }
.plan-grupo-det { margin:6px 0; }
.plan-grupo-det summary { font-size:.76rem; color:var(--text-secondary,#9ca3af); cursor:pointer; padding:2px 0; }
.plan-grupo-det summary:hover { color:#ff6a00; }
.plan-grupo-carro { font-size:.78rem; padding:3px 0 3px 12px; color:var(--text-secondary,#9ca3af); }
/* Romaneio — endereço de entrega no card */
.rm-carro-entrega { font-size:.8rem; color:var(--text-secondary,#9ca3af); margin:4px 0; padding:5px 8px; background:rgba(34,197,94,.06); border-radius:6px; border-left:2px solid #22c55e; }

/* ===== Tela de Edição de Pedido (completa) ===== */
.ep-modal { z-index: 100055; }
.ep-content { max-width: 860px; width: 94%; max-height: 90vh; overflow-y: auto; padding: 0; }
.ep-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:20px 24px 14px; border-bottom:1px solid var(--border,rgba(255,255,255,.1)); position:sticky; top:0; background:var(--surface-1,#14141a); z-index:2; }
.ep-close { font-size:1.6rem; cursor:pointer; color:var(--text-secondary,#9ca3af); line-height:1; }
.ep-close:hover { color:#ff6a00; }
.ep-aviso { margin:14px 24px 0; padding:10px 14px; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.25); border-radius:8px; font-size:.8rem; color:var(--text-secondary,#9ca3af); }
.ep-body { padding:16px 24px; }
.ep-secao { margin-bottom:20px; }
.ep-secao-tit { font-size:.8rem; font-weight:700; color:#ff6a00; letter-spacing:.3px; margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--border-soft,rgba(255,255,255,.06)); }
.ep-secao-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:620px){ .ep-secao-grid { grid-template-columns:1fr; } }
.ep-campo { display:flex; flex-direction:column; gap:4px; }
.ep-campo-full { grid-column:1 / -1; }
.ep-campo label { font-size:.72rem; color:var(--text-secondary,#9ca3af); font-weight:600; }
.ep-campo input { padding:9px 12px; border-radius:8px; border:1px solid var(--border,rgba(255,255,255,.15)); background:var(--surface-2,rgba(255,255,255,.03)); color:inherit; font-size:.88rem; }
.ep-campo input:focus { border-color:#ff6a00; outline:none; }
.ep-actions { display:flex; gap:10px; padding:16px 24px 22px; border-top:1px solid var(--border,rgba(255,255,255,.1)); position:sticky; bottom:0; background:var(--surface-1,#14141a); }
.ep-actions .btn { flex:1; }

/* ===== Central de Operação — cards (novo layout alinhado) ===== */
.central-colunas { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media (max-width:860px){ .central-colunas { grid-template-columns:1fr; } }
.central-col { border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; overflow:hidden; background:var(--surface-1,rgba(255,255,255,.02)); display:flex; flex-direction:column; }
.central-col-cab { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; font-size:.82rem; font-weight:700; letter-spacing:.3px; }
.central-col-coletas { background:rgba(255,106,0,.1); color:#ff6a00; border-bottom:2px solid rgba(255,106,0,.3); }
.central-col-entregas { background:rgba(34,197,94,.1); color:#22c55e; border-bottom:2px solid rgba(34,197,94,.3); }
.central-refresh { background:none; border:none; cursor:pointer; font-size:1rem; opacity:.7; }
.central-refresh:hover { opacity:1; }
.central-cards { display:flex; flex-direction:column; gap:8px; padding:12px; max-height:520px; overflow-y:auto; }
.central-card { display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:10px; background:var(--surface-2,rgba(255,255,255,.02)); cursor:pointer; transition:border-color .12s, background .12s; }
.central-card:hover { border-color:rgba(255,106,0,.4); }
.central-card input[type="checkbox"] { margin-top:3px; flex-shrink:0; width:16px; height:16px; cursor:pointer; accent-color:#ff6a00; }
.central-card-body { flex:1; min-width:0; }
.central-card-linha1 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.central-card-id { font-weight:800; color:#ff6a00; font-size:.9rem; }
.central-card-placa { font-weight:700; font-size:.86rem; }
.central-card-status { margin-left:auto; font-size:.68rem; font-weight:700; }
.central-status-laranja { color:#f59e0b; }
.central-status-verde { color:#22c55e; }
.central-card-cliente { font-size:.84rem; font-weight:600; margin-bottom:2px; }
.central-card-rota { font-size:.8rem; color:var(--text-secondary,#9ca3af); margin-bottom:3px; }
.central-seta { color:#ff6a00; font-weight:700; }
.central-card-tipo { font-size:.76rem; color:var(--text-tertiary,#6b7280); }
.central-sub { color:var(--text-muted,#9ca3af); font-size:.76rem; }
.central-col-rodape { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--border,rgba(255,255,255,.08)); flex-wrap:wrap; margin-top:auto; }
.central-btn { border:none; border-radius:8px; padding:8px 14px; font-weight:700; font-size:.8rem; color:#fff; cursor:pointer; }
.central-btn-laranja { background:#ff6a00; }
.central-btn-azul { background:#3b82f6; }
.central-btn:hover { filter:brightness(1.1); }
.central-btn-mini { margin-top:6px; background:rgba(59,130,246,.15); color:#3b82f6; border:1px solid rgba(59,130,246,.4); border-radius:6px; padding:4px 10px; font-size:.74rem; font-weight:600; cursor:pointer; }
.central-btn-mini:hover { background:rgba(59,130,246,.25); }

/* Item 5: endereços na tela da equipe e nos modais de direcionamento */
.eq-end-linha .eq-end-cel { padding:4px 10px 8px; font-size:.78rem; color:var(--text-secondary,#9ca3af); background:rgba(255,106,0,.04); border-bottom:1px solid var(--border-soft,rgba(255,255,255,.05)); }
.central-modal-peds { max-height:180px; overflow-y:auto; margin-bottom:14px; display:flex; flex-direction:column; gap:6px; }
.central-modal-ped { font-size:.82rem; padding:8px 10px; background:var(--surface-2,rgba(255,255,255,.03)); border:1px solid var(--border-soft,rgba(255,255,255,.06)); border-radius:8px; }
.central-modal-end { font-size:.76rem; color:#ff6a00; }

/* Item 1: campos de endereço editáveis no romaneio */
.rm-end-campo { margin:6px 0; }
.rm-end-campo label { display:block; font-size:.72rem; color:var(--text-secondary,#9ca3af); font-weight:600; margin-bottom:3px; }

/* Item 6: bloco de motorista terceiro na viagem em andamento */
.jv-terceiro { background:rgba(168,85,247,.06); border:1px solid rgba(168,85,247,.25); border-radius:12px; padding:14px 16px; margin-bottom:14px; }
.jv-terceiro-tit { font-size:.85rem; font-weight:700; color:#a855f7; margin-bottom:10px; }
.jv-terceiro-grid { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.jv-terceiro-campo { display:flex; flex-direction:column; gap:4px; flex:1; min-width:140px; }
.jv-terceiro-campo label { font-size:.72rem; color:var(--text-secondary,#9ca3af); font-weight:600; }
.jv-terceiro-campo input { padding:8px 10px; border-radius:8px; border:1px solid var(--border,rgba(255,255,255,.15)); background:var(--surface-2,rgba(255,255,255,.03)); color:inherit; font-size:.88rem; }
.jv-terceiro-campo input:focus { border-color:#a855f7; outline:none; }

/* Romaneio: texto do pátio atual */
.rm-patio-atual { margin:6px 0 2px; font-size:.82rem; }

/* Romaneio: campo coletar em + botão pátio inline */
.rm-coleta-linha { display:flex; gap:6px; align-items:stretch; }
.rm-coleta-linha .rm-local-input { flex:1; }
.rm-patio-inline { position:relative; }
.rm-patio-inline > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center; width:42px; height:100%; min-height:38px; border:1px solid var(--border,rgba(255,255,255,.15)); border-radius:8px; background:rgba(255,106,0,.1); font-size:1.1rem; }
.rm-patio-inline > summary::-webkit-details-marker { display:none; }
.rm-patio-inline > summary:hover { background:rgba(255,106,0,.2); }
.rm-patio-inline[open] > summary { background:#ff6a00; }
.rm-patio-inline .rm-patio-chips { position:absolute; right:0; top:calc(100% + 4px); z-index:10; background:var(--surface-1,#1a1c20); border:1px solid var(--border,rgba(255,255,255,.15)); border-radius:10px; padding:8px; display:flex; flex-wrap:wrap; gap:5px; width:280px; box-shadow:0 8px 24px rgba(0,0,0,.4); }

/* ===== Importação do Evo — prévia ===== */
.evo-overlay { position:fixed; inset:0; z-index:100060; display:flex; align-items:center; justify-content:center; }
.evo-bg { position:absolute; inset:0; background:rgba(0,0,0,.6); }
.evo-painel { position:relative; background:var(--surface-1,#14141a); border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:16px; width:94%; max-width:720px; max-height:88vh; display:flex; flex-direction:column; }
.evo-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:20px 24px 14px; border-bottom:1px solid var(--border,rgba(255,255,255,.1)); }
.evo-x { background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--text-secondary,#9ca3af); }
.evo-lista { overflow-y:auto; padding:14px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.evo-ped { border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:10px; padding:12px 14px; background:var(--surface-2,rgba(255,255,255,.02)); }
.evo-ped.evo-dup { border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.05); }
.evo-ped-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; cursor:pointer; margin-bottom:8px; }
.evo-chk { width:16px; height:16px; accent-color:#ff6a00; cursor:pointer; }
.evo-ped-id { font-weight:800; color:#ff6a00; }
.evo-ped-badge { background:rgba(255,106,0,.15); color:#ff6a00; font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:999px; }
.evo-dup-badge { background:rgba(245,158,11,.15); color:#f59e0b; font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:999px; }
.evo-prob-badge { background:rgba(239,68,68,.15); color:#ef4444; font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:999px; }
.evo-ped-info { font-size:.84rem; display:flex; flex-direction:column; gap:2px; padding-left:26px; }
.evo-actions { display:flex; gap:10px; padding:16px 24px 20px; border-top:1px solid var(--border,rgba(255,255,255,.1)); }
.evo-actions .btn { flex:1; }

/* Planejamento: pregão/referência no card */
.plan-pedido-ref { font-size:.76rem; color:#f59e0b; margin:2px 0; }

/* ===== Cabeçalhos de seção no menu (só financeiro por enquanto) ===== */
.nav-secao-titulo { font-size:.68rem; font-weight:800; letter-spacing:.8px; color:var(--text-tertiary,#6b7280); padding:14px 16px 6px; text-transform:uppercase; opacity:.75; }

/* ===== Central de Conferência ===== */
.conf-header { margin-bottom:18px; }
.conf-titulo { font-size:1.5rem; font-weight:800; margin:0; }
.conf-sub { color:var(--text-secondary,#9ca3af); font-size:.9rem; margin:.3rem 0 0; }
.conf-kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:18px; }
@media (max-width:1000px){ .conf-kpis { grid-template-columns:repeat(2,1fr); } }
.conf-kpi { background:var(--surface-1,rgba(255,255,255,.02)); border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; padding:14px 16px; }
.conf-kpi-lbl { font-size:.68rem; font-weight:700; letter-spacing:.4px; color:var(--text-tertiary,#6b7280); }
.conf-kpi-num { font-size:1.5rem; font-weight:800; margin:6px 0 2px; }
.conf-kpi-hint { font-size:.72rem; color:var(--text-secondary,#9ca3af); }
.conf-verde { color:#22c55e; } .conf-laranja { color:#f59e0b; }
.conf-filtros { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; background:var(--surface-1,rgba(255,255,255,.02)); border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; padding:14px 16px; margin-bottom:16px; }
.conf-filtro { display:flex; flex-direction:column; gap:4px; }
.conf-filtro label { font-size:.7rem; color:var(--text-secondary,#9ca3af); font-weight:600; }
.conf-filtro input, .conf-filtro select { padding:8px 10px; border-radius:8px; border:1px solid var(--border,rgba(255,255,255,.15)); background:var(--surface-2,rgba(255,255,255,.03)); color:inherit; font-size:.85rem; }
.conf-tabela-wrap { background:var(--surface-1,rgba(255,255,255,.02)); border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; overflow:hidden; margin-bottom:16px; }
.conf-tabela-titulo { font-size:.78rem; font-weight:800; letter-spacing:.5px; color:var(--text-secondary,#9ca3af); padding:14px 16px; border-bottom:1px solid var(--border,rgba(255,255,255,.08)); }
.conf-tabela { width:100%; border-collapse:collapse; font-size:.85rem; }
.conf-tabela th { text-align:left; padding:10px 12px; font-size:.72rem; color:var(--text-tertiary,#6b7280); font-weight:700; border-bottom:1px solid var(--border,rgba(255,255,255,.08)); }
.conf-tabela td { padding:11px 12px; border-bottom:1px solid var(--border-soft,rgba(255,255,255,.04)); }
.conf-tabela td.center, .conf-tabela th.center { text-align:center; }
.conf-tabela td.right { text-align:right; }
.conf-tabela tbody tr:hover { background:rgba(255,255,255,.02); }
.conf-status-pill { font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:999px; }
.conf-ver-btn { background:none; border:1px solid var(--border,rgba(255,255,255,.15)); border-radius:6px; padding:4px 8px; cursor:pointer; }
.conf-ver-btn:hover { border-color:#ff6a00; }
.conf-nota { font-size:.82rem; color:var(--text-secondary,#9ca3af); background:rgba(59,130,246,.06); border:1px solid rgba(59,130,246,.2); border-radius:10px; padding:12px 16px; }

/* ===== Central de Conferência — painel lateral de detalhe ===== */
.conf-painel-overlay { position:fixed; inset:0; z-index:100065; }
.conf-painel-bg { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.conf-painel { position:absolute; top:0; right:0; height:100%; width:560px; max-width:94vw; background:var(--surface-1,#14141a); border-left:1px solid var(--border,rgba(255,255,255,.12)); display:flex; flex-direction:column; box-shadow:-8px 0 32px rgba(0,0,0,.4); animation:confSlide .2s ease; }
@keyframes confSlide { from{transform:translateX(40px);opacity:.6} to{transform:translateX(0);opacity:1} }
.conf-painel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:18px 20px 14px; border-bottom:1px solid var(--border,rgba(255,255,255,.1)); }
.conf-painel-tit { font-size:1.15rem; font-weight:800; margin-bottom:6px; }
.conf-painel-x { background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--text-secondary,#9ca3af); }
.conf-painel-info { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; padding:14px 20px; border-bottom:1px solid var(--border-soft,rgba(255,255,255,.06)); }
.conf-painel-info > div { display:flex; flex-direction:column; gap:2px; font-size:.88rem; }
.conf-info-lbl { font-size:.7rem; color:var(--text-tertiary,#6b7280); }
.conf-painel-abas { display:flex; gap:4px; padding:12px 20px 0; border-bottom:1px solid var(--border,rgba(255,255,255,.1)); }
.conf-aba { background:none; border:none; padding:8px 14px; cursor:pointer; font-size:.85rem; font-weight:600; color:var(--text-secondary,#9ca3af); border-bottom:2px solid transparent; }
.conf-aba.ativo { color:#ff6a00; border-bottom-color:#ff6a00; }
.conf-painel-corpo { flex:1; overflow-y:auto; padding:16px 20px; }
.conf-painel-rodape { padding:14px 20px; border-top:1px solid var(--border,rgba(255,255,255,.1)); display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.conf-det-tabela { width:100%; border-collapse:collapse; font-size:.84rem; }
.conf-det-tabela th { text-align:left; padding:8px 10px; font-size:.7rem; color:var(--text-tertiary,#6b7280); font-weight:700; border-bottom:1px solid var(--border,rgba(255,255,255,.1)); }
.conf-det-tabela td { padding:9px 10px; border-bottom:1px solid var(--border-soft,rgba(255,255,255,.04)); }
.conf-det-tabela td.right, .conf-det-tabela th.right { text-align:right; }
.conf-det-tabela td.center, .conf-det-tabela th.center { text-align:center; }
.conf-det-tabela tfoot td { border-top:2px solid var(--border,rgba(255,255,255,.12)); padding-top:10px; }
.conf-esperado-input { width:120px; padding:6px 8px; border-radius:6px; border:1px solid var(--border,rgba(255,255,255,.2)); background:var(--surface-2,rgba(255,255,255,.03)); color:inherit; font-size:.82rem; }
.conf-esperado-input:focus { border-color:#ff6a00; outline:none; }
.conf-frete-aviso { font-size:.8rem; color:var(--text-secondary,#9ca3af); background:rgba(59,130,246,.06); border:1px solid rgba(59,130,246,.2); border-radius:8px; padding:10px 12px; margin-bottom:14px; }
.conf-frete-acoes { margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.conf-just-input { padding:8px 10px; border-radius:8px; border:1px solid var(--border,rgba(255,255,255,.15)); background:var(--surface-2,rgba(255,255,255,.03)); color:inherit; font-size:.85rem; }
.conf-conferida-info { font-size:.82rem; color:#22c55e; }

/* ===== Central de Conferência — painel de fechamento ===== */
.conf-fechamento { background:var(--surface-1,rgba(255,255,255,.02)); border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:12px; padding:18px 20px; margin-bottom:16px; }
.conf-fech-tit { font-size:.95rem; font-weight:800; margin-bottom:14px; }
.conf-fech-resumo { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
@media (max-width:800px){ .conf-fech-resumo { grid-template-columns:repeat(2,1fr); } }
.conf-fech-resumo > div { display:flex; flex-direction:column; gap:3px; }
.conf-fech-resumo span { font-size:.72rem; color:var(--text-tertiary,#6b7280); }
.conf-fech-resumo strong { font-size:1.05rem; }
.conf-fech-status { padding:12px 14px; border-radius:8px; font-size:.85rem; margin-bottom:12px; }
.conf-fech-ok { background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.25); color:#22c55e; }
.conf-fech-bloq { background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.3); color:#f59e0b; }
.conf-fech-fechado { background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.25); color:#ef4444; }

/* Central de Conferência — ações no cabeçalho */
.conf-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.conf-header-acoes { display:flex; gap:8px; flex-wrap:wrap; }

/* ===== Tabela de Frete (Fase 2b) ===== */
.tabfrete-form { background:var(--surface-1,rgba(255,255,255,.02)); border:1px solid rgba(255,106,0,.3); border-radius:12px; padding:16px 18px; margin-bottom:16px; }
.tabfrete-form-tit { font-size:.95rem; font-weight:800; margin-bottom:12px; color:#ff6a00; }
.tabfrete-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px; }
@media (max-width:800px){ .tabfrete-grid { grid-template-columns:1fr; } }
.tabfrete-form-acoes { display:flex; gap:10px; }

/* Busca de cliente: selo de nome fantasia */
.cliente-fantasia { color:#f59e0b; font-size:.78rem; }

/* Transbordo previsto — aviso na viagem em andamento */
.jv-transb-prev { display:inline-block; margin-top:3px; font-size:.72rem; color:#fb923c; font-weight:700; background:rgba(251,146,60,.1); border:1px dashed rgba(251,146,60,.5); border-radius:5px; padding:1px 6px; }

/* Observação do pedido — mais aparente */
.selo-obs { background:rgba(245,158,11,.15) !important; color:#f59e0b !important; cursor:help; }
.rm-carro-obs { font-size:.82rem; color:#b45309; margin:4px 0; padding:6px 10px; background:rgba(245,158,11,.08); border-radius:6px; border-left:3px solid #f59e0b; }
.cg-rastreio-obs { margin:12px 0; padding:10px 14px; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.3); border-radius:8px; font-size:.85rem; color:#b45309; }

/* Aba Pedidos: agrupamento de carga fechada */
.cg-tr-grupo { cursor:pointer; background:rgba(255,106,0,.05); }
.cg-tr-grupo:hover { background:rgba(255,106,0,.1); }
.cg-tr-grupo td { font-size:.86rem; }
.cg-tr-filho { background:rgba(255,255,255,.015); }
.cg-tr-filho td:first-child { border-left:2px solid rgba(255,106,0,.4); }

/* Fiscal: resumo da carga (dados para emitir) */
.fisc-resumo-carga { margin-bottom:14px; padding:12px; background:rgba(255,255,255,.02); border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:10px; }
.fisc-resumo-tab { width:100%; border-collapse:collapse; font-size:.82rem; }
.fisc-resumo-tab th { text-align:left; padding:6px 8px; font-size:.7rem; color:var(--text-tertiary,#6b7280); font-weight:700; border-bottom:1px solid var(--border,rgba(255,255,255,.1)); white-space:nowrap; }
.fisc-resumo-tab td { padding:7px 8px; border-bottom:1px solid var(--border-soft,rgba(255,255,255,.04)); vertical-align:top; }
.fisc-resumo-tab tfoot td { border-top:2px solid var(--border,rgba(255,255,255,.12)); }

/* ===== Correção de responsividade da tela do MOTORISTA no celular ===== */
#motorista { width: 100%; max-width: 100%; box-sizing: border-box; }
#motorista .card { width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; }
/* tabelas de romaneio: viram scroll horizontal contido, não estouram a página */
#motorista .table-container,
#motorista .romaneio-tabela-wrap,
#motorista [class*="tabela"] { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#motorista table { min-width: 640px; } /* a tabela rola dentro do container, sem empurrar a tela */

@media (max-width: 768px) {
  #motorista { padding: 0 !important; }
  #motorista .card { padding: 1rem !important; margin-bottom: 0.8rem; border-radius: 12px; }
  #motorista table { font-size: 0.78rem; min-width: 560px; }
  #motorista .painel-header-bar { flex-wrap: wrap; gap: 6px; }
  /* garante que textos longos quebrem em vez de esticar a tela */
  #motorista, #motorista * { word-break: break-word; overflow-wrap: anywhere; }
}

/* Pátios: discernimento entregar vs transbordando (chips bonitos) */
.patio-discern { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 12px; }
.patio-discern-chip { display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:10px; border:1px solid transparent; }
.patio-discern-chip .pd-ico { font-size:1.05rem; line-height:1; }
.patio-discern-chip .pd-txt { font-size:.76rem; line-height:1.15; color:var(--text-secondary,#9ca3af); }
.patio-discern-chip .pd-txt strong { display:block; font-size:1.15rem; font-weight:800; line-height:1; margin-bottom:2px; }
.patio-discern-entregar { background:rgba(34,197,94,.09); border-color:rgba(34,197,94,.3); }
.patio-discern-entregar .pd-txt strong { color:#22c55e; }
.patio-discern-transb { background:rgba(251,146,60,.09); border-color:rgba(251,146,60,.3); }
.patio-discern-transb .pd-txt strong { color:#fb923c; }

/* Histórico de cargas: De/Até empilhados */
.hist-datas-grupo { display:flex; flex-direction:column; gap:4px; }
.hist-datas-grupo .hist-data { justify-content:space-between; }
.hist-datas-grupo .hist-data input { flex:1; margin-left:6px; }

/* Animação de "surgir" reutilizável (sub-views, painéis) */
.mm-surge { animation: mmTelaSurge 0.28s ease-out; }
@media (prefers-reduced-motion: reduce) { .mm-surge { animation: none; } }

/* Ponto 3: feedback instantâneo ao clicar (sensação de resposta imediata) */
button:active, .btn:active, .nav-btn:active { transform: scale(0.97); transition: transform .05s; }
.mm-clicado { opacity: .75; position: relative; }
.mm-clicado::after { content: ''; position: absolute; right: 10px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: mmSpin .6s linear infinite; opacity: .8; }
@keyframes mmSpin { to { transform: rotate(360deg); } }
body.mm-aguardando, body.mm-aguardando * { cursor: progress !important; }

/* ============================================================
   SERVIÇOS AVULSOS DO MOTORISTA — seleção e confirmação em lote
   ============================================================ */
.mav-lote { background:var(--surface-2,rgba(255,255,255,.04)); border:1px solid var(--border,rgba(255,255,255,.1));
  border-radius:12px; padding:10px 12px; margin-bottom:12px; }
.mav-lote-topo { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
.mav-lote-todos { display:flex; align-items:center; gap:7px; font-size:.84rem; font-weight:600; cursor:pointer; }
.mav-lote-todos input { width:18px; height:18px; accent-color:var(--accent,#ff6a00); }
.mav-lote-cont { font-size:.76rem; color:var(--text-tertiary,#8b93a1); font-weight:600; }
.mav-lote-btns { display:flex; gap:8px; flex-wrap:wrap; }
.mav-lote-btns .btn-motorista-acao { flex:1 1 150px; }
.mav-btn-coleta { background:#38bdf8; }
.mav-btn-entrega { background:#a855f7; }
.mav-chk-wrap { display:flex; align-items:center; margin-right:6px; }
.mav-chk { width:20px; height:20px; accent-color:var(--accent,#ff6a00); cursor:pointer; }

/* Busca do Planejamento de Rotas */
.plan-busca { position:relative; display:flex; align-items:center; padding:0 0 10px; }
.plan-busca-ic { position:absolute; left:10px; font-size:.78rem; opacity:.55; pointer-events:none; }
.plan-busca input { width:100%; padding:7px 28px 7px 30px; font-size:.82rem;
  border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:8px;
  background:var(--surface-2,rgba(255,255,255,.04)); color:inherit; }
.plan-busca input::placeholder { color:var(--text-tertiary,#8b93a1); font-size:.78rem; }
.plan-busca input:focus { outline:none; border-color:var(--accent,#ff6a00); }
.plan-busca-x { position:absolute; right:6px; background:none; border:none; cursor:pointer;
  color:var(--text-tertiary,#8b93a1); font-size:.8rem; padding:4px; }

/* Motivo de permanência no pátio */
.carro-patio-motivo { display:inline-block; margin-top:6px; padding:2px 8px; border-radius:6px;
  font-size:.68rem; font-weight:700; letter-spacing:.2px; }

/* Modal de ocorrência — destino do carro */
.ocor-lista { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; max-height:140px; overflow:auto; }
.ocor-lista-item { font-size:.8rem; padding:4px 8px; border-radius:6px; background:var(--surface-2,rgba(255,255,255,.04)); }
.ocor-aviso { font-size:.82rem; line-height:1.45; padding:11px 13px; border-radius:10px; margin:6px 0 14px;
  background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.35); color:#fca5a5; }
.retirar-alerta { font-size:.8rem; padding:10px 12px; border-radius:9px; margin-top:10px;
  background:rgba(96,165,250,.1); border:1px solid rgba(96,165,250,.35); color:#93c5fd; }
.jv-acao-retirar { background:#64748b; color:#fff; }

/* Bloco de ocorrência no painel lateral do pedido */
.cg-ocor-bloco { margin:12px 0; padding:13px; border-radius:11px;
  background:rgba(239,68,68,.09); border:1px solid rgba(239,68,68,.32); }
.cg-ocor-tit { font-size:.86rem; font-weight:800; color:#ef4444; margin-bottom:6px; }
.cg-ocor-txt { font-size:.82rem; line-height:1.45; margin-bottom:10px; }

/* Busca de cegonha no criar viagem */
.plan-cegonha-busca { position:relative; display:flex; align-items:center; margin-bottom:6px; }
.plan-cegonha-busca input { width:100%; padding:7px 70px 7px 30px; font-size:.82rem;
  border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:8px;
  background:var(--surface-2,rgba(255,255,255,.04)); color:inherit; }
.plan-cegonha-busca input:focus { outline:none; border-color:var(--accent,#ff6a00); }
.plan-cegonha-cont { position:absolute; right:10px; font-size:.7rem; color:var(--text-tertiary,#8b93a1); font-weight:600; }
.plan-trocar-veic { background:none; border:none; cursor:pointer; opacity:.55; font-size:.85rem;
  padding:2px 5px; margin-left:auto; border-radius:5px; }
.plan-trocar-veic:hover { opacity:1; background:rgba(255,255,255,.08); }
.conf-card-saida { color:#60a5fa; font-size:.8rem; }

/* O header do card do motorista ganhou o checkbox de seleção em lote:
   sem isto o space-between jogava o #id para o meio. */
.motorista-pedido-card .mpedido-header { gap:8px; justify-content:flex-start; }
.motorista-pedido-card .mpedido-header .mpedido-status { margin-left:auto; }

/* Marca de "já direcionado" nos cards da Central de Operação */
.cvb-tag-enviado { display:inline-block; margin-top:5px; padding:2px 8px; border-radius:6px;
  font-size:.68rem; font-weight:700; letter-spacing:.2px;
  background:rgba(56,189,248,.14); color:#38bdf8; border:1px solid rgba(56,189,248,.35); }
.cvb-item-enviado { background:rgba(56,189,248,.05); border-left:2px solid rgba(56,189,248,.45); }
.cvb-sub-enviados { display:inline-block; margin-left:6px; font-size:.7rem; font-weight:700; color:#38bdf8; }

/* Falha ao carregar a linha do tempo do histórico de cargas */
.histv-tl-erro { padding:2rem; text-align:center; color:#f59e0b; font-size:.88rem; line-height:1.5; }

/* Alterar destino / troca de veículo */
/* Sólidos como os demais botões de ação: os fundos translúcidos sumiam
   no tema claro e faziam as três ações novas parecerem desabilitadas. */
.jv-acao-trocaveic { background:#0ea5e9; color:#fff; }
.jv-acao-destino { background:#0d9488; color:#fff; }
.dest-check { display:flex; gap:9px; align-items:flex-start; font-size:.84rem; line-height:1.35;
  padding:9px; border-radius:8px; background:var(--surface-2,rgba(255,255,255,.04)); cursor:pointer; margin-bottom:4px; }
.dest-check input { margin-top:2px; width:17px; height:17px; accent-color:#22d3ee; flex-shrink:0; }
.dest-cte-aviso { font-size:.76rem; margin:.4rem 0 0; padding:7px 9px; border-radius:7px;
  background:rgba(96,165,250,.1); border:1px solid rgba(96,165,250,.3); color:#93c5fd; }
.cg-acoes-rapidas { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }

/* Rota + corredor nos blocos da Central */
.cvb-sub-rota { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.cvb-chip-rota, .cvb-chip-corredor { font-size:.68rem; font-weight:700; padding:2px 7px; border-radius:5px; }
.cvb-chip-rota { background:rgba(148,163,184,.16); color:#cbd5e1; }
.cvb-chip-corredor { background:rgba(255,106,0,.14); color:#fb923c; }

/* Selo discreto de ocorrência aberta (Acompanhamento) */
.selo-ocor { display:inline-block; margin-left:5px; padding:1px 6px; border-radius:5px;
  font-size:.64rem; font-weight:700; letter-spacing:.2px; vertical-align:middle;
  background:rgba(251,191,36,.15); color:#fbbf24; border:1px solid rgba(251,191,36,.35);
  cursor:help; white-space:nowrap; }

/* Local cru quando o pátio não casa com a lista fixa (diagnóstico) */
.carro-patio-local-cru { margin-top:4px; font-size:.66rem; color:var(--text-tertiary,#8b93a1);
  cursor:help; word-break:break-word; }

/* Data de início da viagem — comercial e fiscal */
.cg-rota-inicio { font-size:.68rem; color:#60a5fa; font-weight:700; margin-top:2px; white-space:nowrap; }
.cg-rota-naoiniciada { color:var(--text-tertiary,#8b93a1); font-weight:600; }
.cg-info-viagem { margin:10px 0; padding:9px 12px; border-radius:9px; font-size:.82rem;
  background:rgba(96,165,250,.09); border:1px solid rgba(96,165,250,.28); }
.fiscal-inicio-viagem { color:#60a5fa; font-weight:700; font-size:.72rem; white-space:nowrap; }
.fiscal-inicio-pend { color:var(--text-tertiary,#8b93a1); font-size:.72rem; white-space:nowrap; }

/* Modal de troca de veículo */
.troca-veic-grid { display:flex; gap:10px; flex-wrap:wrap; }
.troca-veic-grid .form-group { flex:1 1 180px; }
.troca-veic-dica { font-size:.76rem; line-height:1.4; margin:.2rem 0 .6rem;
  padding:8px 10px; border-radius:8px; color:#fbbf24;
  background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.3); }

/* Data de saída nos cards de viagem (aba Viagens do comercial) */
.cg-vc-data { font-size:.72rem; color:#60a5fa; font-weight:600; margin-top:6px; }
.cg-vc-data-pend { color:var(--text-tertiary,#8b93a1); font-weight:600; }

/* Viagem direta a partir de "Sem rota" */
.vd-lista { display:flex; flex-direction:column; gap:6px; max-height:230px; overflow:auto;
  border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:10px; padding:8px; }
.vd-item { display:flex; gap:9px; align-items:flex-start; padding:7px 8px; border-radius:7px;
  font-size:.83rem; cursor:pointer; transition:background .15s; }
.vd-item:hover { background:var(--surface-2,rgba(255,255,255,.04)); }
.vd-item input { margin-top:3px; width:17px; height:17px; accent-color:var(--accent,#ff6a00); flex-shrink:0; }
.vd-item-rota { font-size:.74rem; color:var(--text-tertiary,#8b93a1); margin-top:2px; }
.vd-resumo { margin-top:12px; padding:11px; border-radius:10px;
  background:var(--surface-2,rgba(255,255,255,.04)); border:1px solid var(--border,rgba(255,255,255,.1)); }
.vd-resumo-tit { font-size:.74rem; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  color:var(--text-tertiary,#8b93a1); margin-bottom:8px; }
.vd-seq { display:flex; flex-direction:column; gap:4px; }
.vd-seq-item { display:flex; align-items:center; gap:8px; padding:5px 7px; border-radius:7px;
  background:var(--surface-1,rgba(255,255,255,.03)); font-size:.82rem; }
.vd-seq-num { width:20px; height:20px; border-radius:50%; background:var(--accent,#ff6a00); color:#fff;
  font-size:.68rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.vd-seq-cidade { flex:1; }
.vd-seq-tag { font-size:.62rem; font-weight:800; padding:1px 5px; border-radius:4px;
  background:rgba(148,163,184,.2); color:#cbd5e1; }
.vd-seq-tag-fim { background:rgba(74,222,128,.18); color:#4ade80; }
.vd-seq-btns button { background:none; border:1px solid var(--border,rgba(255,255,255,.14));
  border-radius:5px; color:inherit; cursor:pointer; font-size:.6rem; padding:2px 5px; }
.vd-seq-btns button:disabled { opacity:.3; cursor:default; }
.vd-aviso { font-size:.76rem; line-height:1.4; margin:9px 0 0; padding:8px 10px; border-radius:7px;
  color:#fbbf24; background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.3); }
.vd-ok { font-size:.76rem; margin:9px 0 0; color:#4ade80; }

/* ============================================================
   EXTRATO DE PÁTIOS — versão enxuta e recolhível
   A lista ficava sempre aberta com 15 linhas de texto corrido,
   dominando a tela. Agora é um cabeçalho clicável e cada linha
   cabe numa só, com o texto completo no tooltip.
   ============================================================ */
.patios-movs-tit {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: none; border: none; cursor: pointer; color: inherit;
    padding: 4px 0; font-size: .92rem; font-weight: 700; text-align: left;
}
.patios-movs-tit:hover { opacity: .8; }
.patios-movs-seta { font-size: .7rem; opacity: .6; }
#patiosMovsLista.oculto { display: none; }

/* sobrescreve o layout antigo das linhas */
.patio-mov {
    display: grid;
    grid-template-columns: 22px minmax(90px, 1fr) minmax(80px, 1.2fr) auto;
    gap: .6rem; align-items: center; flex-wrap: nowrap;
    padding: .34rem .5rem; margin-bottom: .2rem; font-size: .78rem;
    cursor: help;
}
.patio-mov .mov-tipo { font-size: .8rem; padding: 0; background: none !important; text-align: center; }
.mov-carro { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mov-patio { color: var(--text-secondary, #b6bcc6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mov-quando { font-size: .7rem; color: var(--text-tertiary, #8b93a1); white-space: nowrap; text-align: right; }
@media (max-width: 640px) {
    .patio-mov { grid-template-columns: 20px 1fr auto; }
    .mov-patio { display: none; }
}

/* ============================================================
   SELEÇÃO DE CARROS DA VIAGEM — tela ampla
   Com 40 carros num corredor, a caixa antiga de 560px com lista
   de 220px de altura tornava a escolha praticamente às cegas.
   ============================================================ */
.pv-box { background:var(--surface-1,#1a1c20); width:min(1180px, 98vw); max-height:96vh;
  border-radius:14px; padding:18px 20px; display:flex; flex-direction:column; overflow:hidden; }
.pv-cab { display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding-bottom:12px; border-bottom:1px solid var(--border,rgba(255,255,255,.1)); }
.pv-corpo { display:flex; gap:18px; flex:1; min-height:0; padding-top:14px; }
.pv-carros { flex:1; min-width:0; display:flex; flex-direction:column; }
.pv-lateral { width:300px; flex-shrink:0; display:flex; flex-direction:column;
  border-left:1px solid var(--border,rgba(255,255,255,.1)); padding-left:18px; overflow:auto; }

.pv-ferramentas { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.pv-busca { position:relative; flex:1; min-width:200px; display:flex; align-items:center; }
.pv-busca-ic { position:absolute; left:10px; font-size:.8rem; opacity:.55; pointer-events:none; }
.pv-busca input { width:100%; padding:8px 10px 8px 30px; font-size:.84rem; border-radius:8px;
  border:1px solid var(--border,rgba(255,255,255,.12)); background:var(--surface-2,rgba(255,255,255,.04)); color:inherit; }
.pv-busca input:focus { outline:none; border-color:var(--accent,#ff6a00); }
.pv-acoes-sel { display:flex; gap:6px; }

.pv-grade { flex:1; overflow-y:auto; padding-right:4px; }
.pv-grupo { margin-bottom:14px; }
.pv-grupo-cab { display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:6px 8px; border-radius:7px; background:var(--surface-2,rgba(255,255,255,.04)); margin-bottom:7px;
  position:sticky; top:0; z-index:2; }
.pv-grupo-todos { display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:700; cursor:pointer; }
.pv-grupo-todos input { width:16px; height:16px; accent-color:var(--accent,#ff6a00); }
.pv-grupo-cont { font-size:.72rem; color:var(--text-tertiary,#8b93a1); font-weight:600; white-space:nowrap; }
.pv-grupo-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(196px, 1fr)); gap:7px; }

.pv-card { position:relative; display:flex; gap:8px; align-items:flex-start; cursor:pointer;
  padding:8px 9px; border-radius:9px; border:1px solid var(--border,rgba(255,255,255,.1));
  background:var(--surface-2,rgba(255,255,255,.03)); transition:border-color .12s, background .12s; }
.pv-card:hover { border-color:rgba(255,106,0,.35); }
.pv-card:has(input:checked) { border-color:var(--accent,#ff6a00); background:rgba(255,106,0,.08); }
.pv-card input { margin-top:2px; width:16px; height:16px; accent-color:var(--accent,#ff6a00); flex-shrink:0; }
.pv-card-corpo { min-width:0; flex:1; }
.pv-card-placa { font-weight:800; font-size:.86rem; letter-spacing:.3px; }
.pv-card-modelo { font-size:.74rem; color:var(--text-secondary,#b6bcc6);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pv-card-rota { font-size:.7rem; color:var(--text-tertiary,#8b93a1); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pv-card-id { font-size:.64rem; color:var(--text-tertiary,#8b93a1); opacity:.7; margin-top:2px; }

/* Informação do pedido no cartão de montar carga — versão compacta dos selos
   do Planejamento. Fontes menores porque são dezenas de cartões lado a lado. */
.pv-card-placa { display:flex; align-items:baseline; gap:6px; justify-content:space-between; }
.pv-card-valor { font-size:.68rem; font-weight:700; color:#22c55e; white-space:nowrap; }
.pv-card-ref { font-size:.68rem; color:#f59e0b; font-weight:600; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pv-card-onde { font-size:.66rem; color:#a855f7; margin-top:2px; }
.pv-card-selos { margin-top:4px; display:flex; flex-wrap:wrap; gap:3px; }
.pv-card-selos .selo-pedido { font-size:.6rem; padding:1px 5px; }
.pv-card-selos .selos-pedido { display:flex; flex-wrap:wrap; gap:3px; }
.pv-card-trocar { position:absolute; top:5px; right:5px; background:none; border:none; cursor:pointer;
  opacity:0; font-size:.78rem; padding:2px 4px; border-radius:4px; transition:opacity .12s; }
.pv-card:hover .pv-card-trocar { opacity:.6; }
.pv-card-trocar:hover { opacity:1 !important; background:rgba(255,255,255,.1); }

.pv-contador { padding:11px 12px; border-radius:10px; margin-bottom:14px;
  background:var(--surface-2,rgba(255,255,255,.04)); border:1px solid var(--border,rgba(255,255,255,.1)); }
.pv-cont-num { font-size:.86rem; }
.pv-cont-num strong { font-size:1.15rem; color:var(--accent,#ff6a00); }
.pv-cont-alerta { font-size:.76rem; color:#ef4444; font-weight:700; margin-top:5px; }
.pv-cont-ok { font-size:.76rem; color:#4ade80; font-weight:700; margin-top:5px; }
.pv-cont-info { font-size:.76rem; color:var(--text-tertiary,#8b93a1); margin-top:5px; }
.pv-rodape { margin-top:auto; padding-top:14px; }

@media (max-width: 900px) {
  .pv-corpo { flex-direction:column; overflow:auto; }
  .pv-lateral { width:100%; border-left:none; padding-left:0; padding-top:14px;
    border-top:1px solid var(--border,rgba(255,255,255,.1)); }
  .pv-grade { max-height:42vh; }
  .pv-grupo-cards { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ============================================================
   ROMANEIO — preenchimento em lote
   ============================================================ */
.rm-lote { border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:11px;
  padding:11px 13px; margin-bottom:14px; background:var(--surface-2,rgba(255,255,255,.03)); }
.rm-lote-linha { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rm-lote-linha + .rm-lote-linha { margin-top:9px; padding-top:9px;
  border-top:1px dashed var(--border,rgba(255,255,255,.1)); }
.rm-lote-todos { display:flex; align-items:center; gap:8px; font-size:.85rem; font-weight:700; cursor:pointer; }
.rm-lote-todos input { width:17px; height:17px; accent-color:var(--accent,#ff6a00); }
.rm-lote-cont { margin-left:auto; font-size:.76rem; color:var(--text-tertiary,#8b93a1); font-weight:600; }
.rm-lote-rot { font-size:.78rem; font-weight:700; color:var(--text-secondary,#b6bcc6); }
.rm-lote-chips { display:flex; gap:6px; flex-wrap:wrap; }
.rm-lote-livre input { flex:1; min-width:180px; padding:6px 10px; font-size:.82rem; border-radius:7px;
  border:1px solid var(--border,rgba(255,255,255,.12)); background:var(--surface-1,rgba(255,255,255,.03)); color:inherit; }
.rm-lote-chk { width:17px; height:17px; accent-color:var(--accent,#ff6a00);
  margin-right:7px; vertical-align:middle; cursor:pointer; }

/* ============================================================
   ROMANEIO — tela ampla, mesma ideia da criação de viagem
   Eram 820px com um carro embaixo do outro: 21 veículos viravam
   uma rolagem interminável, e a barra de ações ficava no fim,
   fora de alcance. Agora os carros ocupam duas ou três colunas
   conforme a largura, e cabeçalho e rodapé ficam fixos.
   ============================================================ */
.rm-box { background:var(--surface-1,#1a1c20); width:min(1240px, 97vw); max-height:95vh;
  border-radius:14px; padding:20px; display:flex; flex-direction:column; overflow:hidden; }
.rm-box > .rm-grade { flex:1; min-height:0; overflow-y:auto; padding-right:6px; }
.rm-grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(360px, 1fr)); gap:10px;
  align-content:start; }
.rm-grade .rm-carro { margin:0; }
.rm-rodape { border-top:1px solid var(--border,rgba(255,255,255,.1)); padding-top:14px; flex-shrink:0; }
@media (max-width: 820px) {
  .rm-grade { grid-template-columns:1fr; }
}

/* Aviso quando o corredor tem mais carros do que cabe numa cegonha */
.pv-aviso-muitos { font-size:.8rem; line-height:1.45; padding:9px 12px; border-radius:9px; margin-bottom:10px;
  color:#fbbf24; background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.32); }

/* Viagem em andamento sem data de início registrada (casos anteriores à correção) */
.cg-rota-semdata { color:#f59e0b; font-weight:600; }

/* ============================================================
   SEPARAR CARROS DE UMA VIAGEM
   ============================================================ */
.histv-sec-tit { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.histv-btn-separar { background:rgba(168,85,247,.14); color:#c084fc; border:1px solid rgba(168,85,247,.32);
  border-radius:7px; padding:4px 10px; font-size:.72rem; font-weight:700; cursor:pointer; white-space:nowrap; }
.histv-btn-separar:hover { background:rgba(168,85,247,.22); }

.sep-box { background:var(--surface-1,#1a1c20); width:min(1080px,97vw); max-height:94vh;
  border-radius:14px; padding:18px 20px; display:flex; flex-direction:column; overflow:hidden; }
.sep-cab { display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding-bottom:12px; border-bottom:1px solid var(--border,rgba(255,255,255,.1)); }
.sep-corpo { display:flex; gap:18px; flex:1; min-height:0; padding-top:14px; }
.sep-carros { flex:1; min-width:0; overflow-y:auto; padding-right:6px; }
.sep-lateral { width:310px; flex-shrink:0; overflow-y:auto;
  border-left:1px solid var(--border,rgba(255,255,255,.1)); padding-left:18px; }

.sep-grupo { margin-bottom:14px; }
.sep-grupo-cab { display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:7px 9px; border-radius:8px; background:var(--surface-2,rgba(255,255,255,.05));
  font-size:.82rem; margin-bottom:6px; }
.sep-grupo-cab label { display:flex; align-items:center; gap:8px; cursor:pointer; }
.sep-grupo-cab input { width:16px; height:16px; accent-color:#a855f7; }
.sep-grupo-cab span { font-size:.72rem; color:var(--text-tertiary,#8b93a1); white-space:nowrap; }
.sep-item { display:flex; gap:9px; align-items:flex-start; padding:7px 9px; border-radius:7px;
  font-size:.82rem; cursor:pointer; }
.sep-item:hover { background:var(--surface-2,rgba(255,255,255,.04)); }
.sep-item input { margin-top:3px; width:16px; height:16px; accent-color:#a855f7; flex-shrink:0; }
.sep-item-sub { font-size:.72rem; color:var(--text-tertiary,#8b93a1); margin-top:2px; }

.sep-impacto { padding:11px 13px; border-radius:10px; margin-bottom:14px;
  background:var(--surface-2,rgba(255,255,255,.04)); border:1px solid var(--border,rgba(255,255,255,.1)); }
.sep-imp-linha { display:flex; justify-content:space-between; gap:10px; font-size:.82rem; padding:2px 0; }
.sep-imp-aviso { font-size:.74rem; color:#93c5fd; margin-top:7px; padding-top:7px;
  border-top:1px dashed var(--border,rgba(255,255,255,.12)); }

@media (max-width:860px){
  .sep-corpo { flex-direction:column; overflow:auto; }
  .sep-lateral { width:100%; border-left:none; padding-left:0; padding-top:14px;
    border-top:1px solid var(--border,rgba(255,255,255,.1)); }
}

/* Garante a rolagem do modal de edição mesmo com outros CSS carregados depois.
   O rodapé fica preso embaixo e só o corpo rola. */
.ep-content { display:flex; flex-direction:column; overflow:hidden !important; max-height:90vh; }
.ep-content > .ep-body { flex:1 1 auto; overflow-y:auto; min-height:0; }
.ep-content > .ep-header,
.ep-content > .ep-aviso,
.ep-content > .ep-actions { flex:0 0 auto; position:static; }

/* Quem lançou o pedido — abre o histórico do carro */
.hist-lancamento { padding:12px 14px; border-radius:10px; margin-bottom:12px;
  background:rgba(255,106,0,.07); border:1px solid rgba(255,106,0,.25); }
.hist-lanc-tit { font-size:.74rem; font-weight:800; color:#ff6a00;
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.hist-lanc-corpo { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.86rem; }
.hist-lanc-data { color:var(--text-tertiary,#8b93a1); font-size:.78rem; white-space:nowrap; }
.hist-lanc-sub { font-size:.78rem; color:var(--text-secondary,#b6bcc6); margin-top:4px; }

/* Puxar pedido: destaque para os que combinam com o destino da viagem */
.px-card-bom { border-color:rgba(74,222,128,.4) !important; }
.px-card-bom:has(input:checked) { border-color:#4ade80 !important; background:rgba(74,222,128,.1) !important; }
/* Entrega em lote no romaneio */
.rm-chip-entrega { border-color:rgba(74,222,128,.35) !important; color:#4ade80 !important; }

/* Botão de ver senha: tamanho travado.
   O HTML começava com o emoji 👁 e o JavaScript trocava por SVG no primeiro
   clique — dois desenhos de tamanhos diferentes, então o botão "pulava" e no
   Windows o emoji saía borrado. Agora o SVG já vem no HTML; estas regras
   garantem que nada (animações de outros CSS, fonte do sistema) mexa nele. */
.btn-olho-senha svg { display:block; width:19px; height:19px; flex:0 0 auto; pointer-events:none; }
.btn-olho-senha { font-size:0; padding:0; flex:0 0 40px; }
.btn-olho-senha:active { transform: translateY(-50%) scale(0.92); }
.btn-olho-senha, .btn-olho-senha * { animation:none !important; }

/* Busca dos Pátios */
.patios-busca { position:relative; display:flex; align-items:center; margin:12px 0 6px; }
.patios-busca-ic { position:absolute; left:11px; font-size:.82rem; opacity:.55; pointer-events:none; }
.patios-busca input { width:100%; padding:9px 34px 9px 32px; font-size:.85rem; border-radius:9px;
  border:1px solid var(--border,rgba(255,255,255,.14));
  background:var(--surface-2,rgba(255,255,255,.04)); color:inherit; }
.patios-busca input:focus { outline:none; border-color:var(--accent,#ff6a00); }
.patios-busca-x { position:absolute; right:8px; background:none; border:none; cursor:pointer;
  color:var(--text-tertiary,#8b93a1); font-size:.8rem; padding:4px; }
.patios-busca-info { font-size:.78rem; color:var(--text-secondary,#b6bcc6); margin-bottom:10px; }

/* Importação do Evo — seleção carro a carro */
.evo-explica { margin:12px 22px 0; padding:11px 14px; border-radius:9px; font-size:.82rem; line-height:1.5;
  background:rgba(96,165,250,.09); border:1px solid rgba(96,165,250,.3); color:var(--text-secondary,#b6bcc6); }
.evo-barra-sel { display:flex; align-items:center; gap:8px; margin:10px 22px 0; flex-wrap:wrap; }
.evo-contagem { margin-left:auto; font-size:.8rem; color:var(--text-secondary,#b6bcc6); }
.evo-carros { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:4px; margin-top:8px; }
.evo-carro { display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:6px;
  font-size:.78rem; cursor:pointer; background:var(--surface-2,rgba(255,255,255,.03)); }
.evo-carro:hover { background:var(--surface-1,rgba(255,255,255,.06)); }
.evo-carro input { width:15px; height:15px; accent-color:var(--accent,#ff6a00); flex-shrink:0; }

/* Desmembrar solicitação */
.plan-desmembrar-btn { width:100%; margin-bottom:5px; padding:6px 10px; border-radius:7px; cursor:pointer;
  font-size:.74rem; font-weight:700; text-align:center;
  background:rgba(168,85,247,.16); color:#c084fc; border:1px solid rgba(168,85,247,.35); }
.plan-desmembrar-btn:hover { background:rgba(168,85,247,.26); }

/* ============================================================
   CONFERÊNCIA — aba Remuneração
   ============================================================ */
.rem-topo { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-bottom:16px; }
.rem-topo-item { padding:12px 14px; border-radius:11px;
  background:var(--surface-2,rgba(255,255,255,.04)); border:1px solid var(--border,rgba(255,255,255,.1)); }
.rem-topo-item span { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-tertiary,#8b93a1); font-weight:700; }
.rem-topo-item strong { display:block; font-size:1.3rem; margin-top:3px; }
.rem-topo-item small { font-size:.7rem; color:var(--text-tertiary,#8b93a1); }
.rem-topo-destaque { border-color:rgba(255,106,0,.4); background:rgba(255,106,0,.07); }
.rem-topo-destaque strong { color:#ff6a00; font-size:1.5rem; }
.v-pos { color:#22c55e; } .v-neg { color:#ef4444; }

.rem-aviso { font-size:.8rem; padding:9px 12px; border-radius:8px; margin-bottom:12px;
  color:#fbbf24; background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.3); }

.rem-pedido { border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:11px;
  margin-bottom:14px; overflow:hidden; }
.rem-pedido-cab { display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  padding:11px 14px; background:var(--surface-2,rgba(255,255,255,.04)); }
.rem-pedido-id { font-size:.88rem; }
.rem-modelo { color:var(--text-tertiary,#8b93a1); font-size:.78rem; }
.rem-cte { font-size:.7rem; font-weight:700; color:#22c55e; margin-left:6px;
  background:rgba(34,197,94,.13); padding:1px 7px; border-radius:5px; }
.rem-cte-sem { font-size:.7rem; color:var(--text-tertiary,#8b93a1); margin-left:6px; }
.rem-pedido-cli { font-size:.82rem; }
.rem-rota { display:block; font-size:.72rem; color:var(--text-tertiary,#8b93a1); }
.rem-pedido-val { margin-left:auto; text-align:right; }
.rem-pedido-val span { display:block; font-size:.66rem; text-transform:uppercase;
  letter-spacing:.4px; color:var(--text-tertiary,#8b93a1); }
.rem-pedido-val strong { font-size:1.05rem; color:#22c55e; }
.rem-ok { color:#22c55e; font-size:.74rem; font-weight:700; }
.rem-alerta { color:#f59e0b; font-size:.74rem; font-weight:700; }

.rem-repassar { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 14px; background:rgba(96,165,250,.07); border-bottom:1px solid var(--border,rgba(255,255,255,.08)); }
.rem-repassar-dica { font-size:.72rem; color:var(--text-tertiary,#8b93a1); }

.rem-tab { width:100%; border-collapse:collapse; font-size:.84rem; }
.rem-tab th { text-align:left; font-size:.66rem; text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-tertiary,#8b93a1); padding:7px 12px; border-bottom:1px solid var(--border,rgba(255,255,255,.1)); }
.rem-tab td { padding:9px 12px; border-bottom:1px solid var(--border,rgba(255,255,255,.05)); vertical-align:middle; }
.rem-tab .right, .rem-tab th.right { text-align:right; }
.rem-perna-atual { background:rgba(255,106,0,.05); }
.rem-mot-atual { color:#ff6a00; font-weight:800; }
.rem-perna-num { font-size:.74rem; color:var(--text-tertiary,#8b93a1); white-space:nowrap; }
.rem-perna-mot { font-size:.8rem; }
.rem-perna-ceg { font-size:.72rem; color:var(--text-tertiary,#8b93a1); }
.rem-tag-transb { color:#fb923c; font-size:.7rem; margin-left:4px; }
.rem-tag-andamento { color:#f59e0b; font-size:.7rem; margin-left:4px; }
.rem-input { width:112px; padding:6px 9px; border-radius:7px; font-size:.84rem;
  border:1px solid var(--border,rgba(255,255,255,.2));
  background:var(--surface-2,rgba(255,255,255,.04)); color:inherit; }
.rem-input:focus { outline:none; border-color:var(--accent,#ff6a00); }
.rem-origem { font-size:.66rem; color:var(--text-tertiary,#8b93a1); margin-top:3px; }

.rem-pedido-fim { display:flex; gap:18px; flex-wrap:wrap; justify-content:flex-end;
  padding:10px 14px; font-size:.82rem; background:var(--surface-2,rgba(255,255,255,.03)); }
.rem-pedido-fim strong { margin-left:5px; }
.rem-margem strong { color:#22c55e; }
.rem-margem.neg strong { color:#ef4444; }
.rem-rodape { display:flex; justify-content:flex-end; padding-top:8px; }

/* ============================================================
   EXTRATO DO MOTORISTA
   ============================================================ */
.ext-filtros { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin:14px 0 16px;
  padding:12px 14px; border-radius:11px;
  background:var(--surface-2,rgba(255,255,255,.04)); border:1px solid var(--border,rgba(255,255,255,.1)); }
.ext-campo { display:flex; flex-direction:column; gap:3px; }
.ext-campo label { font-size:.66rem; text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-tertiary,#8b93a1); font-weight:700; }
.ext-campo input, .ext-campo select { padding:7px 10px; font-size:.84rem; border-radius:8px;
  border:1px solid var(--border,rgba(255,255,255,.14));
  background:var(--surface-1,rgba(255,255,255,.03)); color:inherit; min-width:150px; }
.ext-check { display:flex; align-items:center; gap:7px; font-size:.8rem; cursor:pointer; }
.ext-check input { width:16px; height:16px; accent-color:var(--accent,#ff6a00); }

.ext-resumo { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.ext-resumo-item { flex:1 1 150px; padding:12px 15px; border-radius:11px;
  background:var(--surface-2,rgba(255,255,255,.04)); border:1px solid var(--border,rgba(255,255,255,.1)); }
.ext-resumo-item span { display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-tertiary,#8b93a1); font-weight:700; }
.ext-resumo-item strong { font-size:1.35rem; }
.ext-destaque { border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.07); }
.ext-destaque strong { color:#22c55e; font-size:1.6rem; }
.ext-pend { border-color:rgba(245,158,11,.4); }
.ext-pend strong { color:#f59e0b; }

.ext-viagem { border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:12px;
  margin-bottom:14px; overflow:hidden; }
.ext-viagem-cab { display:flex; justify-content:space-between; align-items:center; gap:14px;
  flex-wrap:wrap; padding:12px 15px; background:var(--surface-2,rgba(255,255,255,.05)); }
.ext-viagem-rota { font-size:1rem; font-weight:800; }
.ext-viagem-sub { font-size:.76rem; color:var(--text-tertiary,#8b93a1); margin-top:3px; }
.ext-selo-ok { color:#22c55e; font-weight:700; margin-left:7px; }
.ext-selo-pend { color:#f59e0b; font-weight:700; margin-left:7px; }
.ext-viagem-total { text-align:right; }
.ext-viagem-total span { display:block; font-size:.68rem; color:var(--text-tertiary,#8b93a1); }
.ext-viagem-total strong { font-size:1.25rem; color:#22c55e; }

.ext-tab { width:100%; border-collapse:collapse; font-size:.84rem; }
.ext-tab th { text-align:left; font-size:.64rem; text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-tertiary,#8b93a1); padding:7px 15px; border-bottom:1px solid var(--border,rgba(255,255,255,.1)); }
.ext-tab td { padding:9px 15px; border-bottom:1px solid var(--border,rgba(255,255,255,.05)); vertical-align:top; }
.ext-tab .right, .ext-tab th.right { text-align:right; }
.ext-modelo { font-size:.72rem; color:var(--text-tertiary,#8b93a1); margin-top:2px; }
.ext-cli { font-size:.8rem; }
.ext-trajeto { font-size:.8rem; }
.ext-pernas { font-size:.7rem; color:#a855f7; margin-top:2px; }
.ext-end { margin-top:4px; }
.ext-end summary { font-size:.7rem; color:var(--text-tertiary,#8b93a1); cursor:pointer; }
.ext-end div { font-size:.72rem; color:var(--text-secondary,#b6bcc6); margin-top:2px; }
.ext-valor { font-size:.95rem; font-weight:800; color:#22c55e; white-space:nowrap; }
.ext-sem { color:#f59e0b; }

/* ============================================================
   MATRIZ DE FATURAMENTO — cliente × cegonha
   ============================================================ */
.mat-barra { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin:14px 0; }
.mat-campo { display:flex; flex-direction:column; gap:3px; }
.mat-campo label { font-size:.66rem; text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-tertiary,#8b93a1); font-weight:700; }
.mat-campo select { padding:7px 10px; font-size:.84rem; border-radius:8px;
  border:1px solid var(--border,rgba(255,255,255,.14));
  background:var(--surface-2,rgba(255,255,255,.04)); color:inherit; }

.mat-resumo { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.mat-res-item { flex:1 1 170px; padding:12px 15px; border-radius:11px;
  background:var(--surface-2,rgba(255,255,255,.04)); border:1px solid var(--border,rgba(255,255,255,.1)); }
.mat-res-item span { display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-tertiary,#8b93a1); font-weight:700; }
.mat-res-item strong { font-size:1.3rem; }
.mat-res-item small { display:block; font-size:.7rem; color:var(--text-tertiary,#8b93a1); }
.mat-res-destaque { border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.07); }
.mat-res-destaque strong { color:#22c55e; font-size:1.55rem; }
.v-laranja { color:#fb923c; }

/* A matriz cresce para o lado conforme o número de caminhões; a primeira
   coluna fica fixa para não perder de vista de quem é a linha. */
.mat-scroll { overflow-x:auto; border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:11px; }
.mat-tab { width:100%; border-collapse:collapse; font-size:.8rem; white-space:nowrap; }
.mat-tab th { font-size:.64rem; text-transform:uppercase; letter-spacing:.4px; font-weight:800;
  color:var(--text-tertiary,#8b93a1); padding:9px 11px; text-align:left;
  background:var(--surface-2,rgba(255,255,255,.05)); position:sticky; top:0; z-index:2; }
.mat-tab td { padding:8px 11px; border-bottom:1px solid var(--border,rgba(255,255,255,.05)); }
.mat-tab .right, .mat-tab th.right { text-align:right; }
.mat-col-fixa { position:sticky; left:0; z-index:3; min-width:210px; white-space:normal;
  background:var(--surface-1,#1a1c20); font-weight:600; }
.mat-tab thead .mat-col-fixa { z-index:4; background:var(--surface-2,rgba(255,255,255,.05)); }
.mat-carros { display:block; font-size:.66rem; color:var(--text-tertiary,#8b93a1); font-weight:400; }
.mat-zero { color:var(--text-tertiary,#8b93a1); opacity:.4; }
.mat-col-mm { background:rgba(255,106,0,.07); font-weight:700; }
.mat-col-tot { background:rgba(34,197,94,.07); font-weight:800; }
.mat-pct { color:var(--text-tertiary,#8b93a1); font-size:.74rem; }
.mat-tab tfoot td { border-top:2px solid var(--border,rgba(255,255,255,.18)); font-weight:800;
  background:var(--surface-2,rgba(255,255,255,.04)); border-bottom:none; }
.mat-pct-linha td { font-weight:600; font-size:.74rem; color:var(--text-tertiary,#8b93a1); }

.mat-quadros { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:12px; margin-top:16px; }
.mat-quadro { padding:13px 15px; border-radius:11px;
  background:var(--surface-2,rgba(255,255,255,.04)); border:1px solid var(--border,rgba(255,255,255,.1)); }
.mat-quadro-tit { font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-tertiary,#8b93a1); margin-bottom:9px; }
.mat-quadro-tab { width:100%; border-collapse:collapse; font-size:.83rem; }
.mat-quadro-tab td { padding:6px 0; border-bottom:1px solid var(--border,rgba(255,255,255,.05)); }
.mat-quadro-tab .right { text-align:right; font-weight:700; }
.mat-indisp td { opacity:.45; }
.mat-nota { font-size:.72rem; line-height:1.5; color:var(--text-tertiary,#8b93a1); margin:9px 0 0; }

/* Coluna de terceiros na matriz */
.mat-col-terc { background:rgba(96,165,250,.08); font-weight:700; }
.mat-tab th.mat-col-terc { color:#60a5fa; }

/* Repasse do frete para a viagem inteira */
.rem-lote { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 15px; margin-bottom:14px; border-radius:11px;
  background:rgba(96,165,250,.09); border:1px solid rgba(96,165,250,.32); }
.rem-lote-txt strong { display:block; font-size:.9rem; }
.rem-lote-txt span { font-size:.76rem; color:var(--text-tertiary,#8b93a1); }

/* Cancelamento de pedido */
.canc-aviso { font-size:.8rem; line-height:1.45; padding:9px 12px; border-radius:8px; margin-bottom:10px;
  color:#fbbf24; background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.3); }
.canc-aviso-cte { color:#93c5fd; background:rgba(96,165,250,.1); border-color:rgba(96,165,250,.3); }
.canc-escolha { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.canc-escolha-item { font-size:.78rem; line-height:1.45; padding:8px 11px; border-radius:8px;
  background:var(--surface-2,rgba(255,255,255,.04)); border:1px solid var(--border,rgba(255,255,255,.1)); }
.canc-obrig { font-size:.72rem; color:var(--text-tertiary,#8b93a1); font-weight:400; }
.canc-botoes { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.canc-botoes .btn { flex:1 1 140px; min-height:44px; }
.pill-cancelado { display:inline-block; padding:2px 9px; border-radius:999px; font-size:.7rem; font-weight:800;
  background:rgba(239,68,68,.14); color:#ef4444; cursor:help; white-space:nowrap; }
.pill-cancelado-motivo { font-size:.66rem; color:var(--text-tertiary,#8b93a1); margin-top:2px; max-width:220px; }
.cg-canc-bloco { margin:12px 0; padding:13px; border-radius:11px;
  background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.3); }
.cg-canc-tit { font-size:.8rem; font-weight:800; color:#ef4444; margin-bottom:5px; }
.cg-canc-motivo { font-size:.9rem; font-weight:600; }
.cg-canc-meta { font-size:.74rem; color:var(--text-tertiary,#8b93a1); margin-top:4px; }