/* Esticar o container pai do shell APENAS quando esta página estiver montada,
       sem afetar outras telas. Combinado com .rel-page { flex:1; min-height:0; },
       isso faz o relatório (e o grid dentro dele) ocuparem 100% da altura útil até
       o rodapé da janela. */
    html:has(.rel-page) .layout-main    { overflow: hidden; height: 100vh; }
    html:has(.rel-page) .layout-content {
        height: 100%; min-height: 0; padding: 0;
        display: flex; flex-direction: column;
    }
    .rel-page {
        flex: 1 1 auto; min-height: 0; box-sizing: border-box;
        /* Mesmo respiro superior usado pelo módulo Financeiro. */
        padding: 12px 16px 12px;
        display: flex; flex-direction: column; gap: 10px;
        overflow: hidden;
    }
    /* Filtros + toolbar ficam com altura natural; só o grid-wrap flexiona */
    .rel-page > .rel-filtros-wrap,
    .rel-page > .page-header,
    .rel-page > #rel-group-bar { flex-shrink: 0; }

    /* Modo tela cheia (F11 do header): fundo da página e expansão do grid */
    .rel-page:fullscreen,
    .rel-page.rel-page-fullscreen {
        background: var(--bg-body, #0f172a);
        color: var(--text-primary, #e2e8f0);
        overflow-y: auto;
        padding: 12px 16px 16px;
    }
    html.light .rel-page:fullscreen,
    html.light .rel-page.rel-page-fullscreen {
        background: var(--bg-body, #f1f5f9);
        color: var(--text-primary, #0f172a);
    }
    /* Grid expande para ocupar a altura disponível em fullscreen */
    .rel-page:fullscreen .rel-grid-wrap,
    .rel-page.rel-page-fullscreen .rel-grid-wrap { flex: 1; min-height: 0; }
    .rel-page:fullscreen .rel-grid,
    .rel-page.rel-page-fullscreen .rel-grid { height: 100% !important; }
    /* ───────────────── NOVO LAYOUT DOS FILTROS (cards + hint) ───────────────── */
    .rel-filtros-wrap {
        background: var(--bg-card); border-radius: 12px;
        border: 1px solid var(--border-color);
        box-shadow: 0 1px 3px rgba(0,0,0,.06);
        /* overflow VISIBLE para o popover do período (760px) escapar do wrap */
        overflow: visible;
    }
    .rel-filtros-bar { border-radius: 0 0 12px 12px; }
    .rel-filtros {
        display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
        padding: 12px 14px 10px;
    }
    .rel-flt-card {
        display: flex; flex-direction: column; gap: 4px;
        min-width: 0; flex: 0 0 auto;
        /* mesma altura em todos os cards p/ alinhar baseline visual */
        align-self: stretch;
    }
    .rel-flt-card:first-child  { width: 200px; }   /* Placa */
    .rel-flt-card:nth-child(2) { width: 380px; }   /* Período */
    .rel-flt-card:nth-child(3) { width: 220px; }   /* Tipo */
    .rel-flt-lbl {
        font-size: 12px; font-weight: 700; color: var(--text-primary);
        letter-spacing: .02em; text-transform: none;
    }
    .rel-flt-field {
        display: flex; align-items: center; gap: 6px;
        padding: 6px 10px; border-radius: 6px;
        background: var(--bg-panel, rgba(15,23,42,.35));
        border: 1px solid var(--border-color);
        transition: border-color .15s, box-shadow .15s;
        min-width: 0;
        height: 34px;   /* altura uniforme em todos os campos */
        box-sizing: border-box;
    }
    .rel-flt-field:focus-within {
        border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.20);
    }
    .rel-flt-ico { color: var(--text-secondary); flex-shrink: 0; }
    .rel-flt-field input,
    .rel-flt-field select {
        flex: 1; min-width: 0;
        background: transparent; color: var(--text-primary);
        border: none; outline: none;
        font-size: 13px; padding: 0;
    }
    /* As opcoes do select sao renderizadas pelo SO/navegador. Usamos color-scheme
       para dizer ao navegador qual tema usar na lista do dropdown nativo. */
    .rel-flt-field select { color-scheme: light; }
    html:not(.light) .rel-flt-field select { color-scheme: dark; }
    .rel-flt-field select option {
        background: var(--bg-card) !important;
        color: var(--text-primary) !important;
    }
    html:not(.light) .rel-flt-field select option {
        background: #1e293b !important;
        color: #f1f5f9 !important;
    }
    /* Inputs date/time também respeitam o color-scheme para o ícone do calendário */
    html:not(.light) .rel-flt-field input[type=date],
    html:not(.light) .rel-flt-field input[type=time],
    html:not(.light) .rel-pp-input-row input { color-scheme: dark; }
    .rel-flt-field input::placeholder { color: var(--text-secondary); opacity: .7; }
    .rel-flt-field select { cursor: pointer; }
    .rel-flt-dt { font-family: inherit; }
    .rel-flt-sep { color: var(--text-secondary); font-weight: 700; padding: 0 4px; }
    .rel-flt-hint {
        font-size: 11px; color: var(--text-secondary);
        padding-left: 4px; min-height: 14px; line-height: 1.2;
    }
    .rel-flt-hint kbd {
        display: inline-block; padding: 1px 6px; margin: 0 2px;
        border: 1px solid var(--border-color); border-radius: 3px;
        background: var(--bg-card); color: var(--text-primary);
        font-family: ui-monospace, monospace; font-size: 10px; font-weight: 600;
    }
    .rel-flt-actions {
        display: flex; align-items: center; gap: 6px;
        margin-left: auto;   /* empurra Pesquisar + Limpar para a direita */
        align-self: flex-start;
        margin-top: 20px;    /* alinha com o field row (label 18px + gap 4) */
    }
    .rel-btn-primary {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 7px 14px; border-radius: 6px; cursor: pointer;
        background: #3b82f6; color: #fff; border: 1px solid #2563eb;
        font-size: 12px; font-weight: 700;
        box-shadow: 0 2px 6px rgba(59,130,246,.28);
        transition: background .15s;
    }
    .rel-btn-primary:hover:not(:disabled) { background: #2563eb; }
    .rel-btn-primary:disabled { opacity: .55; cursor: not-allowed; }
    .rel-btn-ghost {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 7px 12px; border-radius: 6px; cursor: pointer;
        background: transparent; color: var(--text-primary);
        border: 1px solid var(--border-color);
        font-size: 13px; font-weight: 600;
        transition: all .15s;
    }
    .rel-btn-ghost:hover:not(:disabled) {
        background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.45);
        color: #2563eb;
    }
    .rel-btn-ghost:disabled { opacity: .45; cursor: not-allowed; }
    .rel-flt-field input, .rel-flt-field select { font-size: 12px; }
    .rel-flt-lbl { font-size: 11px; }
    .rel-spin { width: 12px; height: 12px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: rel-spin .7s linear infinite; display: inline-block; }
    @keyframes rel-spin { to { transform: rotate(360deg); } }

    /* Barra inferior do bloco de filtros: dica à esquerda, contagem à direita */
    .rel-filtros-bar {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 10px 18px; border-top: 1px solid var(--border-color);
        background: rgba(59,130,246,.04);
        font-size: 12px;
    }
    .rel-filtros-dica { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); }
    .rel-filtros-dica strong { color: var(--text-primary); }
    .rel-filtros-count { display: inline-flex; align-items: center; gap: 8px; color: #2563eb; font-weight: 600; }
    .rel-filtros-count strong { color: #334155; }
    html:not(.light) .rel-filtros-count { color: #60a5fa; }
    html:not(.light) .rel-filtros-count strong { color: #93c5fd; }
    html:not(.light) .rel-flt-field { background: rgba(15,23,42,.45); }

    /* Validação visual do campo Placa */
    .rel-flt-field.rel-placa-valid   { border-color: rgba(16,185,129,.55); }
    .rel-flt-field.rel-placa-invalid { border-color: rgba(220,38,38,.55); }
    .rel-placa-badge {
        flex-shrink: 0; padding: 2px 8px; border-radius: 10px;
        font-size: 10px; font-weight: 700; letter-spacing: .04em;
        text-transform: uppercase;
    }
    .rel-placa-badge-normal   { background: rgba(59,130,246,.18); color: #334155; }
    .rel-placa-badge-mercosul { background: rgba(16,185,129,.18); color: #047857; }
    html:not(.light) .rel-placa-badge-normal   { color: #93c5fd; }
    html:not(.light) .rel-placa-badge-mercosul { color: #6ee7b7; }
    .rel-placa-erro { color: #dc2626; font-weight: 600; }
    html:not(.light) .rel-placa-erro { color: #f87171; }

    /* ── Date Range Picker (campo Período) ────────────────────── */
    /* Largura do card de Período amarrada à CLASSE (não à posição) — assim funciona
       mesmo quando o card de Placa não existe (ex.: módulo Fiscalização) */
    .rel-flt-card.rel-flt-card-periodo { position: relative; width: 380px; }
    .rel-periodo-trigger { cursor: pointer; }
    .rel-periodo-text { flex: 1; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rel-flt-chev { color: var(--text-secondary); flex-shrink: 0; }

    .rel-periodo-popover {
        position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
        background: var(--bg-card); color: var(--text-primary);
        border: 1px solid var(--border-color); border-radius: 10px;
        box-shadow: 0 12px 36px rgba(0,0,0,.30);
        display: flex; padding: 14px;
        width: 760px; max-width: 96vw;   /* width fixa — escapa do card de 360px */
    }
    .rel-pp-presets {
        width: 180px; padding-right: 12px;
        border-right: 1px solid var(--border-color);
        display: flex; flex-direction: column; gap: 2px;
    }
    .rel-pp-preset {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 6px 10px; border-radius: 6px;
        background: transparent; border: none; color: var(--text-primary);
        font-size: 12px; font-weight: 500; cursor: pointer; text-align: left;
        transition: background .15s;
    }
    .rel-pp-preset:hover { background: rgba(59,130,246,.08); }
    .rel-pp-preset-on { background: rgba(59,130,246,.14); color: #2563eb; font-weight: 700; }
    html:not(.light) .rel-pp-preset-on { color: #93c5fd; }

    .rel-pp-body { flex: 1; padding-left: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
    .rel-pp-cals { display: flex; gap: 20px; position: relative; justify-content: center; }
    .rel-pp-nav {
        position: absolute; top: 4px; width: 24px; height: 24px;
        background: transparent; border: 1px solid var(--border-color); border-radius: 4px;
        color: var(--text-primary); cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .rel-pp-nav:hover { background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.45); }
    .rel-pp-nav-prev { left: 0; }
    .rel-pp-nav-next { right: 0; }
    .rel-pp-cal { width: 240px; }
    .rel-pp-cal-hdr {
        text-align: center; font-size: 13px; font-weight: 700;
        padding: 4px 0 10px; color: var(--text-primary);
    }
    .rel-pp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
    .rel-pp-cal-dow {
        text-align: center; font-size: 10px; font-weight: 700;
        color: var(--text-secondary); padding: 4px 0;
    }
    .rel-pp-cal-day {
        background: transparent; border: none; padding: 0; cursor: pointer;
        width: 28px; height: 28px; border-radius: 50%;
        font-size: 12px; color: var(--text-primary);
        display: inline-flex; align-items: center; justify-content: center;
        margin: 1px auto; transition: background .12s, color .12s;
    }
    .rel-pp-cal-day:hover { background: rgba(59,130,246,.15); }
    .rel-pp-cal-day.off { color: var(--text-secondary); opacity: .35; }
    .rel-pp-cal-day.in { background: rgba(59,130,246,.18); border-radius: 0; }
    .rel-pp-cal-day.sel { background: #2563eb; color: #fff; font-weight: 700; }

    .rel-pp-inputs { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--border-color); padding-top: 12px; }
    .rel-pp-input-grp { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 220px; }
    .rel-pp-input-grp label { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
    .rel-pp-input-row { display: flex; gap: 6px; }
    .rel-pp-input-row input {
        padding: 6px 8px; border-radius: 5px;
        border: 1px solid var(--border-color);
        background: var(--bg-panel, rgba(15,23,42,.35));
        color: var(--text-primary); font-size: 12px;
        font-family: inherit;
    }
    .rel-pp-input-row input[type=date] { flex: 1.4; }
    .rel-pp-input-row input[type=time] { width: 90px; }
    .rel-pp-actions {
        display: flex; align-items: center; gap: 6px;
        padding-top: 8px; border-top: 1px solid var(--border-color);
    }
    .rel-btn-primary {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 16px; border-radius: 8px; cursor: pointer;
        background: #3b82f6; color: #fff; border: 1px solid #2563eb;
        font-size: 13px; font-weight: 700;
        box-shadow: 0 2px 6px rgba(59,130,246,.28);
    }
    .rel-btn-primary:hover:not(:disabled) { background: #2563eb; }
    .rel-btn-primary:disabled { opacity: .55; cursor: not-allowed; }
    .rel-spin { width: 12px; height: 12px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: rel-spin .7s linear infinite; display: inline-block; }
    @keyframes rel-spin { to { transform: rotate(360deg); } }

    .rel-acoes { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    .rel-total { font-size: 13px; color: var(--text-secondary); }
    .rel-total strong { color: var(--text-primary); }
    .rel-toolbar-grp { display: inline-flex; align-items: center; gap: 6px; }
    .rel-toolbar-lbl { font-size: 11px; color: var(--text-secondary); font-weight: 600; }

    .rel-density { display: inline-flex; border-radius: 7px; overflow: hidden; border: 1px solid var(--border-color); }
    .rel-density-btn { padding: 6px 12px; background: var(--bg-card); color: var(--text-secondary); border: none; cursor: pointer; font-size: 12px; font-weight: 600; }
    .rel-density-btn + .rel-density-btn { border-left: 1px solid var(--border-color); }
    .rel-density-active { background: rgba(59,130,246,.12) !important; color: #2563eb !important; }

    .rel-btn-toolbar {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 6px 10px; border-radius: 6px; cursor: pointer;
        background: var(--bg-card); color: var(--text-primary);
        border: 1px solid var(--border-color);
        font-size: 12px; font-weight: 600; transition: all .15s;
    }
    .rel-btn-toolbar:hover { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.4); color: #2563eb; }
    /* Botão só com ícone (quadrado) — para Expandir/Recolher */
    .rel-btn-icon-only {
        display: inline-flex; align-items: center; justify-content: center;
        width: 28px; height: 28px; padding: 0 !important;
    }
    .rel-btn-icon-only svg { display: block; }
    .rel-btn-icon { background: transparent; border: 1px solid var(--border-color); padding: 6px; border-radius: 6px; cursor: pointer; color: var(--text-secondary); }
    .rel-btn-icon:hover { color: var(--text-primary); background: rgba(59,130,246,.06); }

    .rel-exports { margin-left: auto; display: inline-flex; gap: 6px; }
    /* Botão "Exportar" unificado com dropdown de tipos */
    .rel-export-wrap { position: relative; display: inline-block; }
    .rel-btn-export-main {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 12px; border-radius: 7px; cursor: pointer;
        background: var(--bg-card); color: var(--text-primary);
        border: 1px solid var(--border-color);
        font-size: 12px; font-weight: 700; letter-spacing: .03em;
        transition: all .15s;
    }
    .rel-btn-export-main:hover:not(:disabled) {
        background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.45);
        color: #2563eb;
    }
    .rel-btn-export-main:disabled { opacity: .45; cursor: not-allowed; }
    .rel-export-menu {
        position: absolute; top: calc(100% + 4px); right: 0; z-index: 50;
        min-width: 140px;
        background: var(--bg-card); border: 1px solid var(--border-color);
        border-radius: 7px; box-shadow: 0 8px 24px rgba(0,0,0,.20);
        display: flex; flex-direction: column; padding: 4px;
    }
    .rel-export-item {
        padding: 7px 12px; border-radius: 4px; cursor: pointer;
        background: transparent; border: none; color: var(--text-primary);
        font-size: 12px; font-weight: 600; text-align: left;
        display: flex; align-items: center; gap: 10px;
    }
    .rel-export-item:hover { background: rgba(59,130,246,.10); }
    /* Ícone (folha de papel) com a sigla dentro — cor diferente por tipo */
    .rel-export-ico { flex-shrink: 0; }
    .rel-export-pdf  .rel-export-ico { color: #dc2626; }
    .rel-export-xls  .rel-export-ico { color: #047857; }
    .rel-export-xlsx .rel-export-ico { color: #16a34a; }
    .rel-export-csv  .rel-export-ico { color: #64748b; }

    .rel-group-bar {
        display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
        padding: 8px 12px; background: rgba(59,130,246,.04);
        border-radius: 8px; border: 1px dashed rgba(59,130,246,.25);
        transition: all .15s;
    }
    /* Empurra Views + Exportar para a direita reduzindo a área de agrupamento */
    .rel-group-spacer { flex: 1; min-width: 20px; }
    /* Drag em progresso → realça a barra como área de soltar */
    .rel-group-bar.rel-group-bar-drop {
        background: rgba(59,130,246,.10);
        border: 1px dashed rgba(59,130,246,.55);
    }
    .rel-group-bar.rel-group-bar-over {
        background: rgba(59,130,246,.18) !important;
        border: 2px dashed #3b82f6 !important;
        transform: scale(1.01);
    }
    /* Coluna indicadora — seta na linha selecionada (largura compacta) */
    .rel-rownum-cell {
        text-align: center !important; justify-content: center !important;
        background: rgba(148,163,184,.05); padding: 0 !important;
        display: flex !important; align-items: center; justify-content: center;
    }
    .ag-header-cell[col-id="__rownum"] { padding-left: 0 !important; padding-right: 0 !important; }
    .ag-header-cell[col-id="__rownum"] .ag-header-cell-label { padding: 0 !important; justify-content: center !important; }
    .rel-rownum-header { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
    .rel-rownum-config-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 24px; height: 24px; padding: 0;
        background: transparent; border: 1px solid transparent; border-radius: 4px;
        color: #94a3b8; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
    }
    .rel-rownum-config-btn:hover { background: rgba(59,130,246,.15); color: #3b82f6; border-color: rgba(59,130,246,.35); }
    html.light .rel-rownum-config-btn { color: #64748b; }
    html.light .rel-rownum-config-btn:hover { background: rgba(59,130,246,.10); color: #1e40af; }
    .rel-row-arrow { color: #3b82f6; font-size: 11px; line-height: 1; }
    /* Realça a linha selecionada (AG Grid já dá background, reforçamos contraste) */
    /* Destaque forte da linha selecionada — vence o background de cor por status
       e mantém a faixa azul à esquerda + sombra interna sutil */
    /* Linha selecionada — usa o tom navy da UX (bg-card) com borda cyan da marca */
    /* Tema claro: tint azul + borda azul */
    .ag-row.ag-row-selected,
    .ag-row.ag-row-selected[class*="rel-row-"] {
        background: rgba(37, 99, 235, .14) !important;
        color: #0f172a !important;
        box-shadow: inset 3px 0 0 0 #2563eb;
    }
    .ag-row.ag-row-selected .ag-cell,
    .ag-row.ag-row-selected[class*="rel-row-"] .ag-cell {
        background: transparent !important;
        color: #0f172a !important;
        font-weight: 600;
    }
    /* Tema escuro: navy escuro da paleta (slate-700) + borda cyan da marca */
    html:not(.light) .ag-row.ag-row-selected,
    html:not(.light) .ag-row.ag-row-selected[class*="rel-row-"] {
        background: #334155 !important;
        color: #f1f5f9 !important;
        box-shadow: inset 3px 0 0 0 #1e293b;
    }
    html:not(.light) .ag-row.ag-row-selected .ag-cell,
    html:not(.light) .ag-row.ag-row-selected[class*="rel-row-"] .ag-cell {
        color: #f1f5f9 !important;
    }

    /* ──────────────────────────────────────────────────────────
       Filtro customizado estilo cxGrid (set + checkboxes + Personalizar)
       ────────────────────────────────────────────────────────── */
    .rel-setflt-popup {
        display: flex; flex-direction: column;
        width: 260px; max-height: 360px;
        background: var(--bg-card, #fff); color: var(--text-primary, #0f172a);
        border: 1px solid rgba(148,163,184,.35); border-radius: 6px;
        font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.18);
    }
    html:not(.light) .rel-setflt-popup { background: #1e293b; color: #e2e8f0; }
    .rel-setflt-scope {
        display: flex; gap: 10px; padding: 6px 10px;
        border-bottom: 1px solid rgba(148,163,184,.2);
        background: rgba(148,163,184,.06);
    }
    .rel-setflt-scope label { display: flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; }
    .rel-setflt-search { padding: 6px; border-bottom: 1px solid rgba(148,163,184,.2); }
    .rel-setflt-search input {
        width: 100%; padding: 5px 8px; border: 1px solid rgba(148,163,184,.4);
        border-radius: 4px; background: transparent; color: inherit; font-size: 12px;
        box-sizing: border-box;
    }
    .rel-setflt-fixed { padding: 4px 0; border-bottom: 1px solid rgba(148,163,184,.2); }
    .rel-setflt-list { flex: 1; overflow-y: auto; max-height: 220px; padding: 4px 0; }
    .rel-setflt-item {
        display: flex; align-items: center; gap: 6px;
        padding: 4px 10px; cursor: pointer; user-select: none;
    }
    .rel-setflt-item:hover { background: rgba(59,130,246,.10); }
    .rel-setflt-item input[type=checkbox] { margin: 0; cursor: pointer; }
    .rel-setflt-item span { font-size: 12px; }
    .rel-setflt-perso a { color: #3b82f6; text-decoration: none; font-size: 12px; padding-left: 22px; }
    .rel-setflt-perso a:hover { text-decoration: underline; }
    .rel-setflt-actions {
        display: flex; align-items: center; gap: 6px;
        padding: 6px; border-top: 1px solid rgba(148,163,184,.2);
    }
    .rel-setflt-actions button {
        padding: 4px 10px; border: 1px solid rgba(148,163,184,.4); border-radius: 4px;
        background: transparent; color: inherit; cursor: pointer; font-size: 12px;
    }
    .rel-setflt-actions button:hover { background: rgba(148,163,184,.18); }
    .rel-setflt-primary { background: #3b82f6 !important; color: #fff !important; border-color: #3b82f6 !important; }
    .rel-setflt-primary:hover { background: #2563eb !important; }

    /* Modal "Personalizar Filtro" */
    .rel-perso-modal { position: fixed; inset: 0; z-index: 10000; }
    .rel-perso-overlay { position: absolute; inset: 0; background: rgba(15,23,42,.4); }
    .rel-perso-box {
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: 380px; padding: 18px 20px; border-radius: 8px;
        background: var(--bg-card, #fff); color: var(--text-primary, #0f172a);
        box-shadow: 0 10px 30px rgba(0,0,0,.25);
        font-size: 13px;
    }
    html:not(.light) .rel-perso-box { background: #1e293b; color: #e2e8f0; }
    .rel-perso-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
    .rel-perso-sub { font-size: 12px; color: #64748b; margin-bottom: 4px; }
    .rel-perso-col { font-weight: 600; margin-bottom: 8px; }
    .rel-perso-row { display: flex; gap: 8px; margin-bottom: 8px; }
    .rel-perso-row select, .rel-perso-row input {
        padding: 5px 8px; border: 1px solid rgba(148,163,184,.4);
        border-radius: 4px; background: transparent; color: inherit; font-size: 12px;
    }
    .rel-perso-row select { flex: 1; }
    .rel-perso-row input { flex: 1.2; }
    .rel-perso-andor { display: flex; gap: 16px; margin: 6px 0; }
    .rel-perso-andor label { display: flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; }
    .rel-perso-hint { font-size: 11px; color: #64748b; margin-top: 6px; }
    .rel-perso-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
    .rel-perso-actions button {
        padding: 6px 14px; border: 1px solid rgba(148,163,184,.4); border-radius: 4px;
        background: transparent; color: inherit; cursor: pointer; font-size: 12px;
    }
    .rel-perso-actions button:hover { background: rgba(148,163,184,.18); }

    /* Padding horizontal unificado (compacto) — header e célula com mesmo offset */
    /* Header e scrollbars alinhados à UX do dashboard (paleta cyan/blue) */
    [class*="ag-theme-quartz"] {
        --ag-cell-horizontal-padding: 6px;
        --ag-header-cell-padding-x: 6px;
        --ag-font-size: 11px;
        --ag-header-foreground-color: #fff;
        --ag-header-background-color: #1e293b;
        --ag-header-cell-hover-background-color: #334155;
        --ag-header-column-separator-color: rgba(255, 255, 255, 0.30);
        --ag-header-column-resize-handle-color: rgba(255, 255, 255, 0.40);
        --ag-border-color: #0f172a;
        --ag-row-border-color: rgba(15, 23, 42, 0.55);
    }
    /* Borda externa do grid mais marcada */
    [class*="ag-theme-quartz"] .ag-root-wrapper {
        border: 1px solid #0f172a !important;
    }
    html.light [class*="ag-theme-quartz"] {
        --ag-border-color: #475569;
        --ag-row-border-color: rgba(71, 85, 105, 0.30);
    }
    html.light [class*="ag-theme-quartz"] .ag-root-wrapper { border: 1px solid #475569 !important; }
    /* Força via seletor direto pra vencer o tema Quartz dark */
    [class*="ag-theme-quartz"] .ag-header,
    [class*="ag-theme-quartz"] .ag-header-viewport,
    [class*="ag-theme-quartz"] .ag-header-container,
    [class*="ag-theme-quartz"] .ag-header-row,
    [class*="ag-theme-quartz"] .ag-header-cell,
    [class*="ag-theme-quartz"] .ag-pinned-left-header,
    [class*="ag-theme-quartz"] .ag-pinned-right-header {
        background-color: #1e293b !important;
        color: #fff !important;
    }
    [class*="ag-theme-quartz"] .ag-header-cell-text,
    [class*="ag-theme-quartz"] .ag-header-group-cell-label {
        color: #fff !important;
        font-weight: 600 !important;
    }
    /* Hover em coluna do header */
    [class*="ag-theme-quartz"] .ag-header-cell:hover,
    [class*="ag-theme-quartz"] .ag-header-cell-moving {
        background-color: #334155 !important;
    }
    /* ─────── Tema CLARO do grid (light proper) ─────── */
    html.light [class*="ag-theme-quartz"] {
        --ag-background-color: #ffffff;
        --ag-foreground-color: #0f172a;
        --ag-header-background-color: #f1f5f9;
        --ag-header-foreground-color: #0f172a;
        --ag-header-cell-hover-background-color: #e2e8f0;
        --ag-header-column-separator-color: rgba(15,23,42,.20);
        --ag-header-column-resize-handle-color: rgba(15,23,42,.30);
        --ag-row-hover-color: rgba(59,130,246,.08);
        --ag-selected-row-background-color: rgba(59,130,246,.18);
        --ag-odd-row-background-color: #f8fafc;
        --ag-border-color: #cbd5e1;
        --ag-row-border-color: rgba(148,163,184,.30);
    }
    html.light [class*="ag-theme-quartz"] .ag-header,
    html.light [class*="ag-theme-quartz"] .ag-header-viewport,
    html.light [class*="ag-theme-quartz"] .ag-header-container,
    html.light [class*="ag-theme-quartz"] .ag-header-row,
    html.light [class*="ag-theme-quartz"] .ag-header-cell,
    html.light [class*="ag-theme-quartz"] .ag-pinned-left-header,
    html.light [class*="ag-theme-quartz"] .ag-pinned-right-header {
        background-color: #f1f5f9 !important;
        color: #0f172a !important;
    }
    html.light [class*="ag-theme-quartz"] .ag-header-cell-text,
    html.light [class*="ag-theme-quartz"] .ag-header-group-cell-label {
        color: #0f172a !important;
    }
    html.light [class*="ag-theme-quartz"] .ag-header-cell:hover { background-color: #e2e8f0 !important; }
    html.light [class*="ag-theme-quartz"] .ag-root-wrapper { border: 1px solid #cbd5e1 !important; }
    /* Ícones do header — brancos no DARK, escuros no LIGHT */
    [class*="ag-theme-quartz"] .ag-header-cell .ag-icon,
    [class*="ag-theme-quartz"] .ag-header-cell .ag-sort-indicator-icon,
    [class*="ag-theme-quartz"] .ag-header-cell .ag-header-icon,
    [class*="ag-theme-quartz"] .ag-header-icon { color: #fff !important; fill: #fff !important; }
    html.light [class*="ag-theme-quartz"] .ag-header-cell .ag-icon,
    html.light [class*="ag-theme-quartz"] .ag-header-cell .ag-sort-indicator-icon,
    html.light [class*="ag-theme-quartz"] .ag-header-cell .ag-header-icon,
    html.light [class*="ag-theme-quartz"] .ag-header-icon { color: #0f172a !important; fill: #0f172a !important; }

    /* Scrollbars do grid — fundo igual ao header (#1e293b dark / #334155 light) */
    .rel-grid ::-webkit-scrollbar,
    [class*="ag-theme-quartz"] ::-webkit-scrollbar { width: 10px; height: 10px; }
    .rel-grid ::-webkit-scrollbar-track,
    [class*="ag-theme-quartz"] ::-webkit-scrollbar-track {
        background: #1e293b;
    }
    .rel-grid ::-webkit-scrollbar-thumb,
    [class*="ag-theme-quartz"] ::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.55);
        border-radius: 5px;
        border: 2px solid #1e293b;
    }
    .rel-grid ::-webkit-scrollbar-thumb:hover,
    [class*="ag-theme-quartz"] ::-webkit-scrollbar-thumb:hover {
        background: rgba(203, 213, 225, 0.85);
    }
    .rel-grid ::-webkit-scrollbar-corner,
    [class*="ag-theme-quartz"] ::-webkit-scrollbar-corner { background: #1e293b; }
    html.light .rel-grid ::-webkit-scrollbar-track,
    html.light [class*="ag-theme-quartz"] ::-webkit-scrollbar-track {
        background: #f1f5f9;
    }
    html.light .rel-grid ::-webkit-scrollbar-thumb,
    html.light [class*="ag-theme-quartz"] ::-webkit-scrollbar-thumb {
        background: rgba(100, 116, 139, 0.50);
        border-color: #f1f5f9;
    }
    html.light .rel-grid ::-webkit-scrollbar-thumb:hover,
    html.light [class*="ag-theme-quartz"] ::-webkit-scrollbar-thumb:hover {
        background: #64748b;
    }
    html.light .rel-grid ::-webkit-scrollbar-corner,
    html.light [class*="ag-theme-quartz"] ::-webkit-scrollbar-corner { background: #f1f5f9; }
    /* Firefox */
    .rel-grid, [class*="ag-theme-quartz"] {
        scrollbar-color: rgba(148, 163, 184, 0.55) #1e293b;
        scrollbar-width: thin;
    }
    html.light .rel-grid, html.light [class*="ag-theme-quartz"] {
        scrollbar-color: rgba(100, 116, 139, 0.50) #f1f5f9;
    }
    [class*="ag-theme-quartz"] .ag-cell {
        padding-left: 6px !important; padding-right: 6px !important;
        font-size: 11px; line-height: 1.15;
        display: flex !important; align-items: center !important;
    }
    [class*="ag-theme-quartz"] .ag-header-cell .ag-cell-label-container { padding-left: 6px !important; padding-right: 6px !important; }
    [class*="ag-theme-quartz"] .ag-header-cell-text { font-size: 11px; }
    [class*="ag-theme-quartz"] .ag-cell[col-id="__rownum"] { padding-left: 0 !important; padding-right: 0 !important; }
    [class*="ag-theme-quartz"] .ag-header-cell[col-id="__rownum"] .ag-cell-label-container { padding: 0 !important; }

    /* Linha vertical separando colunas — via box-shadow inset (não afeta largura) */
    [class*="ag-theme-quartz"] .ag-cell        { box-shadow: inset -1px 0 0 rgba(148,163,184,.25); }
    [class*="ag-theme-quartz"] .ag-header-cell { box-shadow: inset -1px 0 0 rgba(148,163,184,.35); }
    html:not(.light) [class*="ag-theme-quartz"] .ag-cell        { box-shadow: inset -1px 0 0 rgba(148,163,184,.18); }
    html:not(.light) [class*="ag-theme-quartz"] .ag-header-cell { box-shadow: inset -1px 0 0 rgba(148,163,184,.28); }

    /* Coluna indicadora (▶/☰) — sem padding interno */
    [class*="ag-theme-quartz"] .ag-cell[col-id="__rownum"] { padding-left: 0 !important; padding-right: 0 !important; }

    /* Coluna Qtd Fotos — ícone de câmera + número (verde clicável / vermelho sem fotos) */
    .rel-fotos-cell {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 2px 6px; border-radius: 4px;
        font-weight: normal; transition: background .15s;
    }
    /* O número herda a cor do texto da linha (que segue o status_PDA) */
    .rel-fotos-ok { color: inherit; cursor: pointer; }
    .rel-fotos-ok:hover { background: rgba(34, 211, 238, 0.15); }
    .rel-fotos-no { color: inherit; cursor: default; opacity: .7; }
    .rel-fotos-num { font-size: 12px; color: inherit; font-weight: normal; }
    /* Caixa — Qtd Itens: ícone + número, centralizado */
    .rel-qtd-cell {
        display: inline-flex; align-items: center; justify-content: center; gap: 5px;
        color: inherit;
    }
    .rel-qtd-ico { display: inline-flex; align-items: center; color: #06b6d4; opacity: .9; }
    .rel-qtd-num { font-size: 12px; color: inherit; font-weight: normal; }
    /* Coluna Vídeo — mesma estrutura do Foto(s) com tons roxo */
    .rel-video-cell {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 2px 6px; border-radius: 4px;
        transition: background .15s;
    }
    .rel-video-ok { color: inherit; cursor: pointer; }
    .rel-video-ok:hover { background: rgba(139, 92, 246, 0.18); }
    .rel-video-no { color: inherit; cursor: default; opacity: .7; }
    /* Badge OCR/PDA no header do modal de vídeo */
    .rel-video-tipo-badge {
        display: inline-block; padding: 2px 9px;
        background: linear-gradient(180deg, #8b5cf6, #6d28d9);
        color: #fff; font-size: 10.5px; font-weight: 700;
        letter-spacing: .08em; border-radius: 10px;
        text-transform: uppercase;
        box-shadow: 0 1px 3px rgba(139,92,246,.40);
    }
    .rel-video-tipo-pda { background: linear-gradient(180deg, #3b82f6, #1d4ed8); }
    .rel-video-tipo-ocr { background: linear-gradient(180deg, #8b5cf6, #6d28d9); }
    /* Barra de controles do slideshow OCR (estilo player de vídeo) */
    .rel-vid-bar {
        position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
        z-index: 5; display: flex; align-items: center; gap: 10px;
        width: min(640px, 80%);
        background: rgba(15,23,42,.86); border: 1px solid rgba(148,163,184,.18);
        padding: 8px 14px; border-radius: 10px; backdrop-filter: blur(4px);
        box-shadow: 0 4px 14px rgba(0,0,0,.35);
    }
    .rel-vid-ctrls { display: flex; align-items: center; gap: 4px; flex-shrink:0; }
    .rel-vid-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 30px; height: 30px; border-radius: 50%;
        border: 1px solid rgba(148,163,184,.30);
        background: rgba(30,41,59,.85); color: #e2e8f0;
        cursor: pointer; transition: all .15s ease;
    }
    .rel-vid-btn:hover { background: #334155; border-color: #64748b; color: #fff; }
    .rel-vid-btn:active { transform: scale(.92); }
    .rel-vid-btn-main {
        background: linear-gradient(180deg, #f97316, #ea580c);
        border-color: #f97316; color: #fff;
        box-shadow: 0 2px 6px rgba(249,115,22,.45);
    }
    .rel-vid-btn-main:hover { background: linear-gradient(180deg, #fb923c, #f97316); border-color: #fb923c; color:#fff; }
    /* Barra de progresso (trilha + preenchimento + thumb circular) */
    .rel-vid-progress {
        flex: 1; height: 4px; border-radius: 4px;
        background: rgba(148,163,184,.35); position: relative; cursor: pointer;
    }
    .rel-vid-progress-fill {
        position: absolute; top:0; left:0; height: 100%;
        border-radius: 4px;
        background: #f97316;
        transition: width .12s linear;
    }
    .rel-vid-progress-thumb {
        position: absolute; top: 50%;
        width: 14px; height: 14px; border-radius: 50%;
        background: #f97316; border: 2px solid #fed7aa;
        transform: translate(-50%, -50%);
        transition: left .12s linear;
        box-shadow: 0 0 0 3px rgba(249,115,22,.18);
        pointer-events: none;
    }
    /* Tempo MM:SS / HH:MM:SS */
    .rel-vid-time {
        color: #e2e8f0; font-size: 11px; font-weight: 600;
        font-variant-numeric: tabular-nums;
        flex-shrink:0; letter-spacing: .03em;
    }
    .rel-vid-time-cur { min-width: 56px; text-align: right; }
    .rel-vid-time-tot { min-width: 56px; text-align: left; color:#cbd5e1; }
    /* Barra em modo estático (abaixo do frame OCR) — não sobrepõe a imagem */
    .rel-vid-bar-static {
        position: static; transform: none; left: auto; bottom: auto;
        flex-shrink: 0; margin: 0 auto;
    }
    /* Layout em coluna para OCR: imagem em cima, barra de player centralizada embaixo */
    .rel-fv-ocr-stack {
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 10px;
    }
    .rel-fv-ocr-frame {
        flex: 1 1 auto; min-height: 0;
        width: 100%;
        display: flex; align-items: center; justify-content: center;
        overflow: hidden;
    }
    /* Player de vídeo MP4 — ocupa todo o stage */
    .rel-fv-video {
        background: #000;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        outline: none;
    }
    /* Watermark "OLHO VIVO" sobreposta no player/frames — apenas no MODO DOWNLOAD
       (no preview do modal, escondemos para não poluir a visualização). */
    .rel-fv-video-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
    .rel-fv-watermark {
        display: none;             /* oculta no preview do modal — só aparece no download via canvas */
    }

    /* Visualizador de fotos no modal — thumbs à esquerda + imagem grande à direita */
    .rel-fotos-box { width: 1120px; max-width: 96vw; height: 680px; max-height: 92vh; }
    .rel-fotos-viewer { flex: 1; display: flex; min-width: 0; min-height: 0; }
    .rel-fotos-thumbs {
        width: 160px; padding: 8px; overflow-y: auto;
        border-right: 1px solid rgba(148,163,184,.25);
        display: flex; flex-direction: column; gap: 6px;
    }
    .rel-fotos-loading { padding: 12px; text-align: center; color: #64748b; font-size: 12px; }
    .rel-fotos-thumb {
        border: 2px solid transparent; border-radius: 4px; overflow: hidden;
        cursor: pointer; background: rgba(148,163,184,.08);
        transition: border-color .15s, transform .15s;
    }
    .rel-fotos-thumb:hover { transform: scale(1.02); }
    .rel-fotos-thumb-sel { border-color: #3b82f6; }
    .rel-fotos-thumb img { width: 100%; height: 90px; object-fit: cover; display: block; background: #000; }
    .rel-fotos-thumb-cap { font-size: 10px; padding: 3px 5px; color: #64748b; text-align: center; }

    /* Área da imagem principal — painel de zoom FLUTUA sobre a imagem (estilo Mosaico) */
    .rel-fotos-main {
        flex: 1; position: relative; min-width: 0; min-height: 0;
        background: #000; display: flex;
    }
    .rel-fotos-scroll {
        flex: 1; overflow: auto; min-width: 0; min-height: 0;
        display: flex; align-items: flex-start; justify-content: center;
    }
    .rel-fotos-imgmain { width: 100%; height: auto; display: block; }
    /* Painel de zoom — pill flutuante centralizada no rodapé da imagem */
    .rel-fotos-zoombar {
        position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
        display: inline-flex; align-items: center; gap: 4px;
        background: rgba(0,0,0,.72); border: 1px solid rgba(255,255,255,.18);
        border-radius: 20px; padding: 4px 8px; z-index: 5;
        box-shadow: 0 4px 14px rgba(0,0,0,.4);
    }
    .rel-zoom-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 28px; height: 28px; border-radius: 50%;
        background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
        color: #fff; cursor: pointer; transition: background .15s, border-color .15s;
        font-size: 15px; font-weight: 700; line-height: 1; padding: 0;
    }
    .rel-zoom-btn:hover:not(:disabled) {
        background: rgba(59,130,246,.35); border-color: rgba(59,130,246,.6);
    }
    .rel-zoom-btn:disabled { opacity: .25; cursor: default; }
    .rel-zoom-btn.rel-zoom-reset {
        width: auto; padding: 0 8px; border-radius: 12px;
        font-size: 10px; font-weight: 700; color: #94a3b8; letter-spacing: .04em;
    }
    .rel-zoom-pct {
        font-size: 11px; font-weight: 600; color: #fff;
        min-width: 44px; text-align: center; padding: 0 4px;
    }

    /* Coluna Mapa — ícone clicável */
    .rel-cell-mapa { cursor: pointer; }
    .rel-mapa-ico {
        display: inline-flex; align-items: center; justify-content: center;
        width: 24px; height: 24px; border-radius: 4px;
        transition: background .15s, transform .15s;
    }
    .rel-mapa-ico.rel-mapa-ok { color: #16a34a; }
    .rel-mapa-ico.rel-mapa-no { color: #94a3b8; }
    .rel-cell-mapa:hover .rel-mapa-ico { background: rgba(59,130,246,.12); transform: scale(1.08); }

    /* ── Modal de Mapa v2 (header + card flutuante + popup com ações) ── */
    .rel-mapa-box-v2 {
        width: 1080px !important; max-width: 96vw; height: 660px; max-height: 92vh;
        padding: 0 !important;
    }
    .rel-mv-topbar {
        display: flex; align-items: center; gap: 12px;
        padding: 8px 14px; background: #0f172a; color: #f1f5f9;
        border-bottom: 1px solid rgba(148,163,184,.25);
    }
    html.light .rel-mv-topbar { background: #1e293b; color: #f1f5f9; }
    .rel-mv-tb-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
    .rel-mv-tb-item strong { font-size: 14px; }
    .rel-mv-tb-sep { width: 1px; height: 18px; background: rgba(148,163,184,.30); }
    .rel-mv-muted { color: #cbd5e1; font-weight: 500; }
    .rel-mv-ico-circle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 26px; height: 26px; border-radius: 50%;
        background: rgba(59,130,246,.20); color: #60a5fa;
        flex-shrink: 0;
    }
    .rel-mv-topbar .rel-mapa-close { color: #f1f5f9; }
    .rel-mv-topbar .rel-mapa-close:hover { background: rgba(255,255,255,.12); }
    /* Toast amigável (substitui alert nativo) */
    .rel-toast-host {
        position: fixed; top: 20px; right: 20px; z-index: 100000;
        display: flex; flex-direction: column; gap: 10px; pointer-events: none;
    }
    .rel-toast {
        display: flex; align-items: center; gap: 10px;
        min-width: 280px; max-width: 420px;
        padding: 12px 16px; border-radius: 8px;
        background: #0f172a; color: #f1f5f9;
        border: 1px solid rgba(148,163,184,.25); border-left: 4px solid #3b82f6;
        box-shadow: 0 8px 28px rgba(0,0,0,.40);
        font-size: 13px; font-weight: 500;
        opacity: 0; transform: translateX(24px); transition: opacity .25s ease, transform .25s ease;
        pointer-events: auto;
    }
    .rel-toast.rel-toast-show { opacity: 1; transform: translateX(0); }
    .rel-toast-ico { font-size: 16px; font-weight: 800; flex-shrink: 0; }
    .rel-toast-msg { line-height: 1.35; }
    html.light .rel-toast { background: #ffffff; color: #0f172a; border-color: rgba(15,23,42,.12); }

    /* Botão Exportar do topbar do modal de mapa */
    .rel-mapa-export {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 12px; margin-right: 8px;
        background: rgba(59,130,246,.20); color: #93c5fd;
        border: 1px solid rgba(59,130,246,.45); border-radius: 6px;
        font-size: 12px; font-weight: 600; cursor: pointer;
        transition: all .15s ease;
    }
    .rel-mapa-export:hover { background: rgba(59,130,246,.32); color: #dbeafe; border-color: #3b82f6; }
    .rel-mapa-export:active { transform: scale(.96); }

    .rel-mv-body { position: relative; flex: 1; min-height: 0; background: #000; }
    .rel-mv-card {
        position: absolute; top: 16px; left: 16px; z-index: 5;
        width: 300px; padding: 14px;
        background: var(--bg-card); color: var(--text-primary);
        border: 1px solid var(--border-color); border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0,0,0,.30);
        font-size: 12px;
        /* Quando há muitos detalhes (ex.: Tíquete com AIT) o card rola em vez de cortar */
        max-height: calc(100% - 32px); overflow-y: auto;
    }
    html:not(.light) .rel-mv-card { background: #0f172a; color: #f1f5f9; border-color: #1e293b; }
    .rel-mv-card-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
    .rel-mv-card-placa { font-size: 16px; font-weight: 800; line-height: 1; }
    .rel-mv-card-ait { font-size: 11px; color: #60a5fa; margin-top: 2px; cursor: pointer; }
    .rel-mv-line { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; color: var(--text-primary); }
    .rel-mv-line svg { color: var(--text-secondary); margin-top: 1px; flex-shrink: 0; }
    .rel-mv-addr { font-weight: 500; }
    .rel-mv-addr-sub { color: var(--text-secondary); font-size: 11px; margin-top: 2px; }
    .rel-mv-grid {
        display: grid; grid-template-columns: max-content 1fr; column-gap: 14px; row-gap: 3px;
        padding: 8px 0; margin: 3px 0;
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
    }
    .rel-mv-grid-lbl { font-size: 10px; text-transform: uppercase; color: var(--text-secondary); letter-spacing: .04em; line-height: 1.25; }
    .rel-mv-grid-val { font-weight: 600; font-size: 12px; line-height: 1.25; word-break: break-word; }
    .rel-mv-btn-copy {
        display: inline-flex; align-items: center; gap: 6px;
        margin-top: 10px; padding: 7px 12px; width: 100%;
        background: transparent; color: var(--text-primary);
        border: 1px solid var(--border-color); border-radius: 6px;
        font-size: 12px; font-weight: 600; cursor: pointer;
        justify-content: center;
    }
    .rel-mv-btn-copy:hover { background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.45); color: #2563eb; }
    /* Estado "Copiado!" — outline verde + texto verde (mesmo padrão do botão de fotos) */
    .rel-mv-btn-copy.rel-mv-copied,
    .rel-mv-btn-copy.rel-mv-copied:hover {
        background: rgba(16,185,129,.12) !important;
        color: #10b981 !important;
        border-color: #10b981 !important;
    }
    .rel-mv-map { position: absolute; inset: 0; }
    .rel-mv-no-coord { display: flex; align-items: center; justify-content: center; height: 100%; color: #f59e0b; font-size: 13px; padding: 24px; }

    /* Popup do marker (UX com ações Detalhes/Street View/Navegar) */
    .rel-mv-popup { font-size: 12px; color: #0f172a; line-height: 1.4; min-width: 220px; }
    .rel-mv-popup-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .rel-mv-popup-hdr strong { font-size: 14px; color: #1e40af; }
    .rel-mv-popup-line { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
    .rel-mv-popup-sub { color: #64748b; font-size: 11px; }
    .rel-mv-popup-acts { display: flex; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(148,163,184,.25); }
    .rel-mv-popup-act {
        flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
        padding: 5px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
        background: rgba(59,130,246,.10); color: #1e40af;
        text-decoration: none; transition: background .15s;
    }
    .rel-mv-popup-act:hover { background: rgba(59,130,246,.22); }

    /* ── Visualizador de Fotos v2 (header + card + setas + toolbar + thumbs + footer) ── */
    .rel-fv-box {
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: 1080px; max-width: 96vw;
        height: 660px; max-height: 92vh;
        display: flex; flex-direction: column;
        background: var(--bg-card); color: var(--text-primary);
        border-radius: 10px; overflow: hidden;
        box-shadow: 0 16px 48px rgba(0,0,0,.35);
    }
    html:not(.light) .rel-fv-box { background: #0f172a; color: #f1f5f9; }
    .rel-fv-topbar {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 16px; background: #0f172a; color: #f1f5f9;
        border-bottom: 1px solid rgba(148,163,184,.25);
    }
    html.light .rel-fv-topbar { background: #1e293b; }
    .rel-fv-tb-title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
    .rel-fv-tb-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
    .rel-fv-tb-sep { width: 1px; height: 18px; background: rgba(148,163,184,.30); }
    .rel-mv-ico-sm { width: 22px; height: 22px; }
    .rel-fv-topbar .rel-mapa-close { color: #f1f5f9; }
    .rel-fv-topbar .rel-mapa-close:hover { background: rgba(255,255,255,.12); }

    .rel-fv-body {
        position: relative; flex: 1; min-height: 0;
        display: flex; gap: 0; background: #1e293b;
    }
    /* Card lateral — ao lado da foto (a foto começa após 290px graças ao padding-left do stage) */
    .rel-fv-card {
        position: absolute !important;
        top: 14px; left: 14px; z-index: 5;
        width: 260px;
    }
    .rel-fv-stage {
        flex: 1; position: relative; background: #1e293b;
        display: flex; align-items: center; justify-content: center;
        overflow: hidden;
        /* padding-left reserva espaço para o card (260) + margem (14+14)
           e padding-right para a sidetools (68) */
        padding-left: 296px;
        padding-right: 68px;
    }
    .rel-fv-scroll {
        width: 100%; height: 100%; overflow: auto;
        display: flex; align-items: center; justify-content: center;
        padding: 8px;
        box-sizing: border-box;
    }
    /* Imagem MANTÉM a proporção original — encaixa no container sem deformar */
    .rel-fv-img {
        max-width: 100%; max-height: 100%;
        width: auto; height: auto;
        object-fit: contain;
        display: block; transition: transform .2s;
    }
    .rel-fv-empty {
        color: #f59e0b; font-size: 14px; text-align: center; padding: 24px;
    }
    /* Splash de carregamento dentro do viewer principal de fotos */
    .rel-fv-splash {
        position: absolute; inset: 0; z-index: 5;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 14px;
        background: rgba(15, 23, 42, 0.65);
        backdrop-filter: blur(2px);
        pointer-events: none;
    }
    .rel-fv-splash-spinner {
        width: 56px; height: 56px;
        border: 4px solid rgba(59, 130, 246, 0.25);
        border-top-color: #3b82f6;
        border-radius: 50%;
        animation: relFvSpin 0.85s linear infinite;
        box-shadow: 0 0 18px rgba(59, 130, 246, 0.40);
    }
    .rel-fv-splash-text {
        color: #f1f5f9; font-size: 13px; font-weight: 600; letter-spacing: .06em;
        text-shadow: 0 1px 4px rgba(0, 0, 0, .65);
    }
    @keyframes relFvSpin { to { transform: rotate(360deg); } }
    .rel-fv-nav {
        position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
        width: 52px; height: 52px; border-radius: 50%;
        background: rgba(15,23,42,.78); color: #f1f5f9;
        border: 1px solid rgba(255,255,255,.20);
        display: inline-flex; align-items: center; justify-content: center;
        cursor: pointer; transition: background .15s, transform .15s;
        box-shadow: 0 4px 16px rgba(0,0,0,.45);
    }
    .rel-fv-nav:hover { background: #2563eb; transform: translateY(-50%) scale(1.08); }
    .rel-fv-nav:active { transform: translateY(-50%) scale(.95); }
    /* "Prev" colocado FORA da área do card (card ocupa até ~290px da esquerda) */
    .rel-fv-nav-prev { left: 304px; }
    /* "Next" exatamente na borda esquerda da sidetools (que tem 68px) */
    .rel-fv-nav-next { right: 80px; }

    .rel-fv-sidetools {
        position: absolute; top: 0; right: 0; z-index: 5;
        width: 68px; padding: 10px 6px;
        background: #0f172a; border-left: 1px solid rgba(148,163,184,.25);
        display: flex; flex-direction: column; gap: 6px;
        height: 100%;
    }
    html.light .rel-fv-sidetools { background: #1e293b; }
    .rel-fv-stool {
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 8px 4px; background: transparent;
        border: 1px solid transparent; border-radius: 6px;
        color: #cbd5e1; cursor: pointer; font-size: 9px; font-weight: 600;
        transition: all .15s;
    }
    .rel-fv-stool:hover { background: rgba(59,130,246,.18); color: #f1f5f9; border-color: rgba(59,130,246,.40); }
    .rel-fv-stool svg { width: 18px; height: 18px; }
    .rel-fv-stool span { letter-spacing: .02em; }

    /* Bottom toolbar removida — controles ficam apenas na sidetools à direita */

    /* Thumbnails strip horizontal */
    .rel-fv-thumbs-wrap {
        display: flex; align-items: center; gap: 6px;
        padding: 10px 12px; background: var(--bg-card);
        border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
    }
    html:not(.light) .rel-fv-thumbs-wrap { background: #0f172a; border-color: #1e293b; }
    .rel-fv-thumbs-nav {
        width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
        background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary);
        cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    }
    .rel-fv-thumbs-nav:hover { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.45); color: #2563eb; }
    .rel-fv-thumbs {
        flex: 1; display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px;
        scroll-behavior: smooth;
    }
    .rel-fv-thumbs::-webkit-scrollbar { height: 6px; }
    .rel-fv-thumbs::-webkit-scrollbar-thumb { background: rgba(148,163,184,.4); border-radius: 3px; }
    .rel-fv-thumb {
        position: relative; flex: 0 0 160px;
        border: 2px solid transparent; border-radius: 6px; overflow: hidden;
        cursor: pointer; background: rgba(148,163,184,.10);
        transition: border-color .15s, transform .15s;
    }
    .rel-fv-thumb:hover { transform: translateY(-2px); }
    .rel-fv-thumb-sel { border-color: #3b82f6; box-shadow: 0 0 0 1px rgba(59,130,246,.40); }
    .rel-fv-thumb img { display: block; width: 100%; height: 90px; object-fit: cover; background: #000; }
    .rel-fv-thumb-num {
        position: absolute; top: 4px; left: 4px;
        width: 22px; height: 22px; border-radius: 4px;
        background: rgba(0,0,0,.65); color: #fff; font-size: 11px; font-weight: 700;
        display: inline-flex; align-items: center; justify-content: center; z-index: 1;
    }
    .rel-fv-thumb-cap { padding: 4px 6px; font-size: 10px; color: var(--text-secondary); text-align: center; }

    /* Bloco do botão Copiar — sem linha separadora (border removida) */
    .rel-fv-card-coord { margin-top: 10px; }
    .rel-fv-card .rel-mv-btn-copy {
        width: 100%; margin-top: 0; padding: 7px 10px;
        font-size: 11.5px;
    }

    /* Footer (legado — não usado mais) */
    .rel-fv-footer {
        display: flex; align-items: center; gap: 12px;
        padding: 10px 16px;
        background: var(--bg-card); color: var(--text-primary);
    }
    html:not(.light) .rel-fv-footer { background: #0f172a; }
    .rel-fv-foot-info { display: inline-flex; align-items: center; gap: 22px; flex: 1; font-size: 12px; color: var(--text-secondary); }
    .rel-fv-foot-info strong { color: var(--text-primary); margin-right: 4px; }
    .rel-fv-foot-acts { display: inline-flex; gap: 8px; }
    .rel-fv-foot-btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 7px 12px; border-radius: 6px;
        background: transparent; color: var(--text-primary);
        border: 1px solid var(--border-color); font-size: 12px; font-weight: 600;
        cursor: pointer; text-decoration: none;
    }
    .rel-fv-foot-btn:hover { background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.45); color: #2563eb; }
    .rel-fv-foot-btn-primary { background: #3b82f6; color: #fff; border-color: #2563eb; }
    .rel-fv-foot-btn-primary:hover { background: #2563eb; color: #fff; }
    /* Feedback verde quando coordenadas são copiadas (outline + texto verde) */
    .rel-fv-foot-btn-copied,
    .rel-fv-foot-btn.rel-fv-foot-btn-copied:hover {
        background: rgba(16,185,129,.12) !important;
        color: #10b981 !important;
        border-color: #10b981 !important;
    }

    /* Modal de visualização do mapa */
    .rel-mapa-modal { position: fixed; inset: 0; z-index: 10000; }
    .rel-mapa-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.85); backdrop-filter: blur(4px); }
    .rel-mapa-box {
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: 880px; max-width: 95vw; height: 540px; max-height: 90vh;
        background: var(--bg-card, #fff); color: var(--text-primary, #0f172a);
        border-radius: 10px; box-shadow: 0 16px 48px rgba(0,0,0,.35);
        display: flex; flex-direction: column; overflow: hidden;
    }
    html:not(.light) .rel-mapa-box { background: #1e293b; color: #e2e8f0; }
    .rel-mapa-hdr {
        display: flex; align-items: center; justify-content: space-between;
        padding: 10px 16px; border-bottom: 1px solid rgba(148,163,184,.25);
        font-size: 14px;
    }
    .rel-mapa-close {
        width: 28px; height: 28px; border: none; background: transparent;
        font-size: 20px; cursor: pointer; color: inherit; border-radius: 4px;
    }
    .rel-mapa-close:hover { background: rgba(148,163,184,.2); }
    .rel-mapa-body { flex: 1; display: flex; min-height: 0; }
    .rel-mapa-side {
        width: 260px; padding: 12px 14px;
        border-right: 1px solid rgba(148,163,184,.25);
        display: flex; flex-direction: column; gap: 10px;
        font-size: 12px; overflow: hidden;
    }
    .rel-mapa-row { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
    .rel-mapa-lbl {
        font-size: 10px; text-transform: uppercase; color: #64748b;
        letter-spacing: .04em; line-height: 1.1;
    }
    .rel-mapa-val { font-weight: 600; font-size: 12.5px; word-break: break-word; line-height: 1.2; }
    .rel-mapa-popup { font-size: 12px; color: #0f172a; line-height: 1.4; }
    .rel-mapa-popup strong { font-size: 13px; color: #1e40af; }
    .rel-mapa-popup-local { margin-top: 2px; }
    .rel-mapa-popup-coord {
        margin-top: 4px; padding-top: 4px;
        border-top: 1px dashed rgba(148,163,184,.5);
        font-family: monospace; font-size: 11px; color: #64748b;
    }
    .rel-mapa-warn {
        margin-top: auto; padding: 10px; background: rgba(245,158,11,.10);
        border-left: 3px solid #f59e0b; border-radius: 4px;
        font-size: 12px; color: #b45309;
    }
    .rel-mapa-map { flex: 1; min-width: 0; }

    /* Datetime — célula e cabeçalho centralizados */
    .ag-cell.rel-cell-center { text-align: center !important; justify-content: center !important; }
    .ag-header-cell.rel-header-center .ag-header-cell-label { justify-content: center !important; }

    /* Numérico — célula e cabeçalho alinhados à direita (ex.: totalizadores do Lote) */
    .ag-cell.rel-cell-right { text-align: right !important; justify-content: flex-end !important; }
    .ag-header-cell.rel-header-right .ag-header-cell-label { justify-content: flex-end !important; }

    /* Padronização do cabeçalho: alça ⠿ à esquerda, menu/filtro à direita */
    .ag-header-cell { position: relative; overflow: hidden; }
    .ag-header-cell .ag-header-cell-label,
    .ag-header-cell .ag-header-cell-comp-wrapper { overflow: hidden; min-width: 0; }
    .ag-header-cell .ag-header-cell-text {
        overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0;
    }
    .rel-drag-grip {
        display: inline-flex; align-items: center; justify-content: center;
        position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
        width: 14px; height: 18px; cursor: grab; color: #94a3b8;
        font-size: 12px; line-height: 1; user-select: none;
        border-radius: 3px; z-index: 2;
        opacity: 0; transition: opacity .15s, color .15s, background .15s;
    }
    .ag-header-cell:hover .rel-drag-grip { opacity: .7; }
    .rel-drag-grip:hover { color: #3b82f6; background: rgba(59,130,246,.12); opacity: 1 !important; }
    .rel-drag-grip:active { cursor: grabbing; }
    /* Container do header — width 100% para ocupar a célula inteira;
       padding já é forçado pela regra unificada acima. */
    .ag-header-cell .ag-cell-label-container { width: 100%; }
    .ag-header-cell .ag-header-cell-label {
        flex: 1 1 auto; min-width: 0;
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center;
    }
    /* Texto do header sempre ANTES do indicador de sort */
    .ag-header-cell .ag-header-cell-label .ag-header-cell-text { order: 1; }
    .ag-header-cell .ag-header-cell-label .ag-sort-indicator-container,
    .ag-header-cell .ag-header-cell-label .ag-header-icon.ag-sort-indicator,
    .ag-header-cell .ag-header-cell-label .ag-sort-order { order: 2 !important; margin-left: 4px; }
    /* Em colunas numéricas — força alinhamento à esquerda também */
    .ag-header-cell.ag-header-cell-sortable .ag-header-cell-label,
    .ag-right-aligned-header .ag-header-cell-label,
    .ag-numeric-header .ag-header-cell-label {
        justify-content: flex-start !important;
        text-align: left !important;
    }
    /* Botão de menu/filtro FIXADO ABSOLUTAMENTE no canto direito (AG Grid v31
       posiciona o menu antes do label — força posicionamento absoluto) */
    .ag-header-cell .ag-header-cell-menu-button,
    .ag-header-cell .ag-header-icon.ag-header-cell-menu-button {
        position: absolute !important;
        right: 4px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 2;
    }
    .ag-header-cell .ag-header-cell-filter-button,
    .ag-header-cell .ag-header-icon.ag-header-cell-filter-button {
        position: absolute !important;
        right: 26px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 2;
    }
    .rel-group-chips { display: inline-flex; align-items: center; gap: 0; flex-wrap: wrap; }
    /* Dica exibida quando não há nenhuma coluna agrupada */
    .rel-group-hint {
        color: var(--text-secondary); font-size: 12px; font-style: italic;
        padding: 0 6px; opacity: .85;
    }
    .rel-group-hint strong { color: #3b82f6; font-style: normal; padding: 0 2px; }
    /* Com chips → esconde a dica */
    .rel-group-bar:has(.rel-chip) .rel-group-hint { display: none; }
    /* Sem chips → esconde label "Agrupar por:", botões e separador */
    .rel-group-bar:not(:has(.rel-chip)) > .rel-toolbar-lbl,
    .rel-group-bar:not(:has(.rel-chip)) .rel-btn-icon-only,
    .rel-group-bar:not(:has(.rel-chip)) .rel-toolbar-sep { display: none; }
    /* Chip de agrupamento — drágavel, com número de nível e setas hierárquicas */
    .rel-chip {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 4px 8px 4px 6px; border-radius: 14px;
        background: #3b82f6; color: #fff;     /* blue-500 — mesma cor do botão Pesquisar */
        font-size: 11px; font-weight: 700;
        cursor: grab; user-select: none;
        border: 2px solid #2563eb; transition: all .15s;
        box-shadow: 0 2px 6px rgba(59,130,246,.28);
        position: relative;
    }
    .rel-chip:active { cursor: grabbing; }
    .rel-chip.rel-chip-dragging { opacity: .45; }
    .rel-chip.rel-chip-dragover { border-color: #1e40af; background: #1e40af; transform: scale(1.05); }
    /* Tema dark mantém a mesma cor (azul vibrante combina com fundo escuro) */
    html:not(.light) .rel-chip { background: #3b82f6; color: #fff; border-color: #2563eb; }
    html:not(.light) .rel-chip-level { background: rgba(255,255,255,.25); color: #fff; }
    html:not(.light) .rel-chip button { background: rgba(255,255,255,.25); color: #fff; }
    html:not(.light) .rel-chip button:hover { background: rgba(255,255,255,.45); }
    .rel-chip-grip { font-size: 10px; opacity: .8; }
    .rel-chip-level {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 16px; height: 16px; padding: 0 4px;
        background: rgba(255,255,255,.25); color: #fff;
        border-radius: 50%; font-size: 9px; font-weight: 800;
    }
    .rel-chip-text { white-space: nowrap; }
    .rel-chip button {
        background: rgba(255,255,255,.25); border: none; color: #fff;
        width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
        font-size: 12px; line-height: 1; padding: 0; margin-left: 2px;
    }
    .rel-chip button:hover { background: rgba(255,255,255,.45); }
    /* Seta entre chips para indicar hierarquia (tree-like) */
    .rel-chip + .rel-chip { margin-left: 14px; }
    .rel-chip + .rel-chip::before {
        content: '▸';
        position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
        color: #94a3b8; font-size: 11px;
    }

    .rel-erro { background: #fff1f1; border: 1px solid #fecaca; color: #b91c1c; padding: 8px 12px; border-radius: 8px; font-size: 13px; }

    /* Grid expande para preencher o espaço vertical restante da página */
    .rel-grid-wrap  { position: relative; display: flex; gap: 10px; flex: 1 1 auto; min-height: 0; height: 100%; }
    .rel-grid-stack { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0; min-height: 0; min-width: 0; height: 100%; }
    .rel-grid {
        width: 100%; flex: 1 1 auto; min-height: 300px; height: 100%;
        border-radius: 10px 10px 0 0; overflow: hidden;
        border: 1px solid var(--border-color);
    }
    /* AG Grid: força o wrapper interno a preencher o .rel-grid */
    .rel-grid .ag-root-wrapper,
    .rel-grid .ag-root,
    .rel-grid .ag-body-viewport { height: 100% !important; }
    /* Barra inferior — exibe o filtro aplicado (estilo cxGrid) */
    /* Paginação customizada (padrão do anexo) */
    .rel-pagination {
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
        padding: 8px 14px; background: var(--bg-card); color: var(--text-primary);
        border: 1px solid var(--border-color); border-top: none;
        border-radius: 0 0 10px 10px;
        font-size: 12px;
    }
    .rel-pg-left, .rel-pg-right { display: inline-flex; align-items: center; gap: 6px; }
    .rel-pg-mid { color: var(--text-secondary); }
    .rel-pg-mid strong { color: var(--text-primary); }
    .rel-pg-lbl { color: var(--text-secondary); }
    .rel-pg-size, .rel-pg-page {
        background: var(--bg-card); color: var(--text-primary);
        border: 1px solid var(--border-color); border-radius: 5px;
        padding: 4px 6px; font-size: 12px;
    }
    .rel-pg-size { min-width: 64px; }
    .rel-pg-page { width: 50px; text-align: center; }
    .rel-pg-page::-webkit-inner-spin-button,
    .rel-pg-page::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    .rel-pg-page { -moz-appearance: textfield; appearance: textfield; }
    .rel-pg-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 28px; height: 26px; padding: 0; border-radius: 5px;
        background: var(--bg-card); color: var(--text-primary);
        border: 1px solid var(--border-color);
        font-size: 12px; font-weight: 700; cursor: pointer;
        transition: all .15s;
    }
    .rel-pg-btn:hover:not(:disabled) {
        background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.45);
        color: #2563eb;
    }
    .rel-pg-btn:disabled { opacity: .35; cursor: not-allowed; }

    .rel-filter-bar {
        display: none; align-items: center; gap: 6px;
        padding: 4px 8px;
        background: rgba(148,163,184,.10); border: 1px solid var(--border-color); border-top: none;
        border-radius: 0 0 10px 10px;
        font-size: 12px; color: var(--text-primary); font-family: 'JetBrains Mono', monospace;
    }
    .rel-filter-bar.rel-filter-bar-active { display: flex; }
    .rel-filter-bar-close {
        display: inline-flex; align-items: center; justify-content: center;
        width: 18px; height: 18px; border-radius: 3px;
        background: rgba(239,68,68,.12); color: #ef4444;
        border: 1px solid rgba(239,68,68,.30);
        cursor: pointer; font-size: 11px; font-weight: 700; line-height: 1; padding: 0;
    }
    .rel-filter-bar-close:hover { background: rgba(239,68,68,.22); }
    .rel-filter-bar-chk {
        display: inline-flex; align-items: center; justify-content: center;
        width: 18px; height: 18px; border-radius: 3px;
        background: rgba(16,185,129,.14); color: #10b981;
        border: 1px solid rgba(16,185,129,.30);
        font-size: 11px; font-weight: 700; line-height: 1;
    }
    .rel-filter-bar-expr { font-size: 12px; color: var(--text-secondary); }
    /* Painel "Configurar Colunas" — dropdown flutuante abaixo do botão ☰ no header,
       com lista em DUAS COLUNAS para reduzir scroll vertical. */
    .rel-cols-aside {
        position: absolute; top: 38px; left: 4px; z-index: 100;
        width: 480px;
        /* Ajusta a altura ao conteúdo (não estica até a base) — limita ao espaço útil */
        max-height: calc(100% - 50px);
        background: var(--bg-card); border: 1px solid var(--border-color);
        border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
        display: flex; flex-direction: column;
    }
    .rel-cols-hdr {
        display: flex; align-items: center; justify-content: space-between;
        padding: 8px 12px; border-bottom: 1px solid var(--border-color); font-size: 13px;
    }
    .rel-cols-list {
        padding: 6px 10px; overflow-y: auto; flex: 1;
        /* Flow vertical: preenche a 1ª coluna completa antes de ir para a 2ª */
        column-count: 2; column-gap: 10px;
    }
    .rel-cols-list .rel-col-chk {
        display: flex; break-inside: avoid; -webkit-column-break-inside: avoid;
        page-break-inside: avoid; margin-bottom: 0;
    }
    .rel-col-chk {
        display: flex; align-items: center; gap: 6px; font-size: 12px;
        cursor: pointer; padding: 1px 4px; border-radius: 3px;
        border: 1px solid transparent; transition: background .15s, border-color .15s;
        line-height: 1.2;
    }
    .rel-col-chk:hover { background: rgba(59,130,246,.06); }
    .rel-col-chk.rel-col-dragging { opacity: .5; }
    .rel-col-chk.rel-col-dragover { border-color: #3b82f6; background: rgba(59,130,246,.12); }
    .rel-col-grip {
        color: #94a3b8; cursor: grab; font-size: 11px; padding: 0 2px;
        user-select: none;
    }
    .rel-col-grip:active { cursor: grabbing; }
    .rel-col-chk:hover .rel-col-grip { color: #3b82f6; }
    /* Coluna virtual "Mapa": não reordenável — grip apenas decorativo/oculto */
    .rel-col-grip-off { visibility: hidden; cursor: default; }
    .rel-col-chk-virtual:hover .rel-col-grip-off { color: #94a3b8; }
    .rel-col-name { flex: 1; }

    /* Linhas de cabeçalho de grupo (tema claro) */
    .rel-grid-group-row { background: rgba(30,41,59,.06) !important; font-weight: 700; cursor: pointer; border-top: 1px solid rgba(30,41,59,.18); }
    .rel-grid-group-row:hover { background: rgba(30,41,59,.10) !important; }
    .rel-grid-group-cell { padding: 6px 12px; color: #1e40af; }
    .rel-grid-group-count { color: var(--text-secondary); font-weight: 500; margin-left: 6px; }
    /* Agrupamento — texto escuro alta legibilidade + contagem cinza neutra */
    .rel-group-inline { display: inline-flex; align-items: center; gap: 6px; color: #0f172a; white-space: nowrap; }
    .rel-group-inline strong { color: #0f172a; font-weight: 700; }
    .rel-group-ico { display: inline-block; width: 14px; text-align: center; color: #1e40af; font-size: 13px; font-weight: 800; }
    .rel-group-count { color: #64748b; font-weight: 500; margin-left: 4px; font-style: italic; }

    /* Permite overflow visível nas células de grupo/subtotal/total e remove
       as bordas verticais entre células (visualmente a linha vira contínua) */
    .ag-row.rel-grid-group-row .ag-cell,
    .ag-row.rel-grid-subtotal-row .ag-cell,
    .ag-row.rel-grid-total-row .ag-cell {
        overflow: visible !important;
        border-right: none !important;
        border-left:  none !important;
    }
    /* Remove também as bordas das colunas pinadas (esquerda/direita) */
    .ag-row.rel-grid-group-row .ag-cell.ag-cell-last-left-pinned,
    .ag-row.rel-grid-subtotal-row .ag-cell.ag-cell-last-left-pinned,
    .ag-row.rel-grid-total-row .ag-cell.ag-cell-last-left-pinned,
    .ag-row.rel-grid-group-row .ag-cell.ag-cell-first-right-pinned,
    .ag-row.rel-grid-subtotal-row .ag-cell.ag-cell-first-right-pinned,
    .ag-row.rel-grid-total-row .ag-cell.ag-cell-first-right-pinned {
        border-right: none !important;
        border-left:  none !important;
    }
    /* Ancora o label do grupo / subtotal / total à ESQUERDA do grid (mesmo quando
       a 1ª coluna visível é numérica, que por padrão alinha à direita) */
    .ag-row.rel-grid-group-row .ag-cell:first-child,
    .ag-row.rel-grid-subtotal-row .ag-cell:first-child,
    .ag-row.rel-grid-total-row .ag-cell:first-child {
        text-align: left !important;
        justify-content: flex-start !important;
    }
    .ag-row.rel-grid-group-row .ag-cell:first-child .ag-cell-value,
    .ag-row.rel-grid-subtotal-row .ag-cell:first-child .ag-cell-value,
    .ag-row.rel-grid-total-row .ag-cell:first-child .ag-cell-value {
        text-align: left !important;
        width: 100%;
    }

    /* Subtotal por grupo */
    .rel-grid-subtotal-row { background: rgba(245,158,11,.10) !important; border-top: 1px dashed rgba(245,158,11,.45); }
    .rel-grid-subtotal-row strong { color: #b45309; }
    /* Contagem do subtotal: tom âmbar combinando com o fundo, com leve transparência */
    .rel-subtotal-count { color: #92400e; font-weight: 500; margin-left: 6px; font-size: .92em; font-style: italic; }
    html:not(.light) .rel-subtotal-count { color: #92400e !important; }

    /* Total Geral (pinned bottom row) */
    .rel-grid-total-row { background: rgba(30,41,59,.08) !important; border-top: 2px solid #1e293b !important; }
    .rel-grid-total-row strong { color: #0f172a; font-size: 13px; }

    /* ── Tema ESCURO — cores claras para contraste sobre fundo escuro ── */
    /* Dark mode: fundo bem escuro contrastando com as linhas de dados (slate-800)
       e texto BRANCO sobre ele. Igual padrão de "header secundário" da UX. */
    html:not(.light) .rel-grid-group-row {
        background: #1e293b !important;
        border-top: 1px solid #334155;
    }
    html:not(.light) .rel-grid-group-row:hover { background: #243248 !important; }
    html:not(.light) .ag-row.rel-grid-group-row .ag-cell { color: #f1f5f9 !important; }
    html:not(.light) .rel-group-inline,
    html:not(.light) .rel-group-inline strong { color: #f8fafc !important; }
    html:not(.light) .rel-group-ico { color: #38bdf8 !important; }
    html:not(.light) .rel-group-count { color: #cbd5e1 !important; }
    /* Subtotal no escuro: mesma paleta do modo claro (fundo âmbar claro + texto âmbar escuro) */
    html:not(.light) .rel-grid-subtotal-row { background: rgba(245,158,11,.10) !important; border-top: 1px dashed rgba(245,158,11,.45); }
    html:not(.light) .rel-grid-subtotal-row strong { color: #b45309 !important; }
    html:not(.light) .ag-row.rel-grid-subtotal-row .ag-cell { color: #b45309 !important; }
    html:not(.light) .rel-grid-total-row { background: rgba(15,23,42,.55) !important; border-top: 2px solid #475569 !important; }
    html:not(.light) .rel-grid-total-row strong { color: #f1f5f9; }

    .rel-toolbar-sep { width: 1px; height: 22px; background: var(--border-color); margin: 0 4px; }

    /* Coloração de linhas — regras do anexo (cores Delphi originais) */
    /* SUBSTITUIDO*       → clOrange (#FF7F00)   + texto preto */
    /* STATUS_PDA = PDA   → clInfoBk (#FFFFE1)   + texto preto */
    /* CONSIST. NÃO ACEITO→ clSilver  (#C0C0C0)  + texto preto */
    /* CONSIST. ACEITO    → clMoneyGreen (#C0DCC0) + texto preto */
    /* ENVIADO PARA MULTA → clSkyBlue (#87CEEB)  + texto preto */
    /* Status indicado APENAS pelo chip colorido na coluna Status — sem tarja lateral.
       (As barras coloridas estavam aparecendo no meio das colunas porque o AG Grid
       renderiza panes separados — pinned left/center/pinned right — e cada um tem
       seu próprio :first-child, gerando múltiplas tarjas inesperadas.) */

    /* Chip de destaque para colunas PDA Ativo / Aprovado / Substituído / Tipo Agente */
    .rel-cell-chip {
        display: inline-block;
        padding: 1px 10px;
        border-radius: 9px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .02em;
        white-space: nowrap;
        line-height: 1.5;
        text-transform: uppercase;
        text-align: center;
        min-width: 150px;          /* acomoda "1 - NÃO APROVEITADO" sem espremer os menores */
        box-sizing: border-box;
        box-shadow: 0 1px 2px rgba(0,0,0,.30);
    }

    /* Chip do Status — compacto e uniforme */
    .rel-status-chip {
        display: inline-block;
        padding: 1px 8px;
        border-radius: 10px;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: .01em;
        white-space: nowrap;
        line-height: 1.45;
        text-transform: uppercase;
        text-align: center;
        min-width: 145px;
        box-sizing: border-box;
        box-shadow: 0 1px 2px rgba(0,0,0,.40);
    }

    /* Master-Detail (linha expandida) */
    .rel-detail-wrap { background: rgba(59,130,246,.04); padding: 12px 16px; border-left: 3px solid #3b82f6; }
    .rel-detail-hdr { font-weight: 700; color: #1e40af; margin-bottom: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
    .rel-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; }
    .rel-detail-item { display: flex; flex-direction: column; gap: 2px; }
    .rel-detail-lbl { font-size: 10px; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; }
    .rel-detail-val { font-size: 12px; color: var(--text-primary); }

    /* Splash sobrepondo apenas a área do grid (toolbar/Total/Densidade ficam visíveis) */
    .rel-splash-overlay {
        position: absolute; inset: 0; z-index: 20;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
        background: rgba(15, 23, 42, 0.75);
        backdrop-filter: blur(2px);
        border-radius: 10px;
    }

    /* Bulk bar flutuante */
    .rel-bulk-bar {
        position: fixed; bottom: -60px; left: 50%; transform: translateX(-50%);
        background: #1e293b; color: #fff;
        padding: 10px 16px; border-radius: 10px;
        display: inline-flex; align-items: center; gap: 12px;
        font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.30);
        transition: bottom .25s ease-out;
        z-index: 1000;
    }
    .rel-bulk-bar-active { bottom: 24px; }
    .rel-bulk-bar .rel-btn-toolbar { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.20); color: #fff; }
    .rel-bulk-bar .rel-btn-toolbar:hover { background: rgba(255,255,255,.22); color: #fff; }
    .rel-bulk-bar .rel-btn-icon { color: #fff; border-color: rgba(255,255,255,.20); }

    /* ═════════ LAYOUT MANAGER MODAL ═════════ */
    /* Botão Layout com layout ativo — destaque visual (borda + fundo cyan) */
    .rel-btn-toolbar-active {
        border-color: rgba(34,211,238,.55) !important;
        background: linear-gradient(180deg, rgba(34,211,238,.14), rgba(34,211,238,.06)) !important;
        color: #67e8f9 !important;
        box-shadow: 0 0 0 1px rgba(34,211,238,.18), 0 2px 6px rgba(8,145,178,.18) !important;
    }
    .rel-btn-toolbar-active:hover {
        border-color: rgba(34,211,238,.75) !important;
        background: linear-gradient(180deg, rgba(34,211,238,.22), rgba(34,211,238,.10)) !important;
        color: #a5f3fc !important;
    }
    .rel-layout-sep { margin: 0 2px 0 4px; color: rgba(148,163,184,.7); font-weight: 600; }
    .rel-layout-current {
        font-size: 12px; font-weight: 700; color: #67e8f9;
        max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Tema claro — cores mais saturadas para contraste com fundo claro */
    html.light .rel-btn-toolbar-active {
        border-color: #0891b2 !important;
        background: linear-gradient(180deg, #cffafe, #a5f3fc) !important;
        color: #155e75 !important;
        box-shadow: 0 0 0 1px rgba(8,145,178,.35), 0 1px 3px rgba(8,145,178,.20) !important;
    }
    html.light .rel-btn-toolbar-active:hover {
        border-color: #0e7490 !important;
        background: linear-gradient(180deg, #a5f3fc, #67e8f9) !important;
        color: #0c4a6e !important;
    }
    html.light .rel-btn-toolbar-active svg { color: #0891b2 !important; stroke: #0891b2 !important; }
    html.light .rel-btn-toolbar-active .rel-layout-current { color: #0e7490 !important; }
    html.light .rel-btn-toolbar-active .rel-layout-sep { color: #0891b2 !important; }
    .rel-lm-backdrop {
        position: fixed; inset: 0; z-index: 10000;
        background: rgba(0,0,0,.65); backdrop-filter: blur(3px);
        display: flex; align-items: center; justify-content: center;
        animation: relLmFade .18s;
    }
    @keyframes relLmFade { from { opacity: 0; } to { opacity: 1; } }
    .rel-lm-modal {
        position: relative;
        background: var(--bg-card, #fff); color: var(--text-primary, #0f172a);
        border-radius: 12px; box-shadow: 0 24px 64px rgba(0,0,0,.50);
        width: 760px; max-width: 95vw; max-height: 80vh;
        display: flex; flex-direction: column; overflow: hidden;
        border: 1px solid var(--border-color, #cbd5e1);
    }
    html:not(.light) .rel-lm-modal { background: #1e293b; color: #e2e8f0; border-color: #334155; }
    .rel-lm-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 18px; border-bottom: 1px solid var(--border-color, #cbd5e1);
        background: linear-gradient(180deg, rgba(59,130,246,.06), rgba(59,130,246,.02));
        font-size: 15px;
    }
    html:not(.light) .rel-lm-header { border-color: #334155; background: linear-gradient(180deg, rgba(59,130,246,.14), rgba(59,130,246,.06)); }
    .rel-lm-title { display: inline-flex; align-items: center; gap: 10px; color: #3b82f6; }
    .rel-lm-title svg { color: #3b82f6; flex-shrink: 0; }
    html:not(.light) .rel-lm-title, html:not(.light) .rel-lm-title svg { color: #93c5fd; }
    .rel-lm-modal { width: 920px; }
    .rel-lm-body {
        display: grid; grid-template-columns: 1fr 270px; gap: 16px;
        padding: 14px 18px; flex: 1; min-height: 0; overflow: hidden;
    }
    /* ── Coluna esquerda: pesquisa + lista ── */
    .rel-lm-left { display: flex; flex-direction: column; min-height: 0; gap: 8px; }
    .rel-lm-search {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 7px 10px; background: rgba(15,23,42,.04);
        border: 1px solid var(--border-color, #cbd5e1); border-radius: 8px;
        transition: border-color .12s, box-shadow .12s;
    }
    html:not(.light) .rel-lm-search { background: rgba(15,23,42,.30); border-color: #334155; }
    .rel-lm-search:focus-within { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
    .rel-lm-search svg { color: #64748b; flex-shrink: 0; }
    .rel-lm-search input {
        flex: 1; border: 0; background: transparent; outline: none;
        font-size: 13px; color: inherit;
    }
    .rel-lm-search-clear {
        border: 0; background: transparent; cursor: pointer; color: #94a3b8;
        font-size: 16px; line-height: 1; padding: 0 4px;
    }
    .rel-lm-search-clear:hover { color: #ef4444; }
    .rel-lm-count-line {
        display: flex; justify-content: space-between; align-items: center;
        font-size: 11px; color: #64748b;
        padding: 0 4px;
    }
    .rel-lm-count-line strong { color: #3b82f6; font-weight: 700; }
    html:not(.light) .rel-lm-count-line strong { color: #93c5fd; }
    .rel-lm-list {
        flex: 1; overflow-y: auto; border: 1px solid var(--border-color, #cbd5e1);
        border-radius: 8px; background: rgba(15,23,42,.02);
    }
    html:not(.light) .rel-lm-list { background: rgba(15,23,42,.30); border-color: #334155; }
    .rel-lm-empty {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 8px; padding: 40px 16px; text-align: center; font-size: 12px;
        color: #64748b; line-height: 1.6;
    }
    .rel-lm-empty-ico { font-size: 32px; opacity: .55; }
    .rel-lm-empty strong { color: var(--text-primary, #0f172a); font-size: 13px; }
    html:not(.light) .rel-lm-empty strong { color: #e2e8f0; }

    /* ── Item da lista ── */
    .rel-lm-item {
        display: flex; align-items: center; gap: 10px;
        padding: 9px 12px; cursor: pointer;
        border-bottom: 1px solid rgba(148,163,184,.16);
        font-size: 13px; transition: background .12s;
        position: relative;
    }
    .rel-lm-item:last-child { border-bottom: 0; }
    .rel-lm-item:hover { background: rgba(59,130,246,.06); }
    .rel-lm-item-sel {
        background: rgba(59,130,246,.18) !important;
        box-shadow: inset 4px 0 0 #3b82f6;
    }
    .rel-lm-check {
        width: 18px; height: 18px; flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1.5px solid rgba(148,163,184,.50); border-radius: 50%;
        color: #fff; transition: all .12s;
    }
    .rel-lm-item-sel .rel-lm-check { background: #3b82f6; border-color: #3b82f6; }
    .rel-lm-badge-def { color: #f59e0b; font-size: 14px; flex-shrink: 0; }
    .rel-lm-item-info { flex: 1; min-width: 0; }
    .rel-lm-name { font-weight: 600; line-height: 1.3; }
    .rel-lm-item-sub {
        display: flex; align-items: center; gap: 6px;
        font-size: 10px; color: #64748b; margin-top: 2px;
    }
    .rel-lm-item-dot { opacity: .5; }
    .rel-lm-item-menu-wrap { position: relative; flex-shrink: 0; }
    .rel-lm-dot-btn {
        width: 26px; height: 26px; border: 0; background: transparent;
        color: #64748b; cursor: pointer; border-radius: 4px;
        font-size: 16px; line-height: 1; font-weight: 700;
        transition: background .12s, color .12s;
    }
    .rel-lm-dot-btn:hover { background: rgba(148,163,184,.20); color: #0f172a; }
    html:not(.light) .rel-lm-dot-btn:hover { color: #e2e8f0; }
    .rel-lm-ctx-menu {
        position: absolute; top: 100%; right: 0; z-index: 20;
        min-width: 200px; padding: 4px;
        background: var(--bg-card, #fff); color: var(--text-primary, #0f172a);
        border: 1px solid var(--border-color, #cbd5e1); border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0,0,0,.30);
    }
    html:not(.light) .rel-lm-ctx-menu { background: #0f172a; color: #e2e8f0; border-color: #334155; }
    .rel-lm-ctx-menu button {
        display: flex; align-items: center; gap: 8px; width: 100%;
        padding: 7px 10px; border: 0; background: transparent;
        color: inherit; text-align: left; cursor: pointer;
        font-size: 12px; font-weight: 500; border-radius: 4px;
    }
    .rel-lm-ctx-menu button:hover { background: rgba(59,130,246,.12); }
    .rel-lm-ctx-menu .rel-lm-ctx-danger { color: #dc2626; }
    .rel-lm-ctx-menu .rel-lm-ctx-danger:hover { background: rgba(220,38,38,.10); }
    .rel-lm-ctx-sep { height: 1px; background: rgba(148,163,184,.20); margin: 3px 0; }

    .rel-lm-hint {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 0 4px; font-size: 10.5px; color: #64748b; font-style: italic;
    }
    .rel-lm-hint svg { opacity: .7; }

    /* ── Coluna direita: ação primária + detalhes ── */
    .rel-lm-right { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
    .rel-lm-salvar-btn {
        width: 100%; justify-content: center !important; gap: 8px !important;
        padding: 10px 12px !important; font-size: 13px !important;
    }
    .rel-lm-details {
        flex: 1; padding: 12px; overflow-y: auto;
        background: rgba(59,130,246,.05);
        border: 1px solid rgba(59,130,246,.20); border-radius: 8px;
        display: flex; flex-direction: column; gap: 6px;
    }
    html:not(.light) .rel-lm-details { background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.30); }
    .rel-lm-details-title {
        font-size: 11px; font-weight: 700; color: #3b82f6;
        text-transform: uppercase; letter-spacing: .08em;
        margin-bottom: 6px;
    }
    html:not(.light) .rel-lm-details-title { color: #93c5fd; }
    .rel-lm-detail-row {
        display: flex; gap: 6px; font-size: 11.5px; line-height: 1.5;
    }
    .rel-lm-detail-row .lbl { color: #64748b; font-weight: 600; min-width: 78px; }
    .rel-lm-detail-row .val { color: inherit; flex: 1; word-break: break-word; }
    .rel-lm-detail-sep { height: 1px; background: rgba(148,163,184,.25); margin: 4px 0; }
    .rel-lm-detail-stat {
        display: flex; align-items: center; gap: 8px;
        font-size: 11.5px; padding: 3px 0;
    }
    .rel-lm-detail-stat svg { color: #3b82f6; flex-shrink: 0; }
    html:not(.light) .rel-lm-detail-stat svg { color: #93c5fd; }
    .rel-lm-detail-stat strong { color: #3b82f6; font-weight: 700; }
    html:not(.light) .rel-lm-detail-stat strong { color: #93c5fd; }
    .rel-lm-detail-btn {
        margin-top: 4px; width: 100%;
        justify-content: center !important; gap: 6px !important;
        font-size: 11.5px !important; padding: 7px 10px !important;
    }
    .rel-lm-details-empty {
        flex: 1; display: flex; flex-direction: column; align-items: center;
        justify-content: center; gap: 10px; padding: 24px 12px;
        background: rgba(15,23,42,.03); border: 1px dashed rgba(148,163,184,.40);
        border-radius: 8px; color: #94a3b8; font-size: 12px; text-align: center;
        line-height: 1.5;
    }
    html:not(.light) .rel-lm-details-empty { background: rgba(15,23,42,.20); }

    .rel-lm-msg {
        padding: 8px 18px; font-size: 12px; font-weight: 600;
        background: rgba(59,130,246,.10); color: #1d4ed8;
        border-top: 1px solid rgba(59,130,246,.30);
    }
    html:not(.light) .rel-lm-msg { color: #93c5fd; background: rgba(59,130,246,.18); }

    /* Checkbox "Definir como padrão" no dialog Salvar */
    .rel-lm-dialog-check {
        display: inline-flex; align-items: center; gap: 8px;
        margin-top: 12px; font-size: 12px; cursor: pointer;
        color: inherit; user-select: none;
    }
    .rel-lm-dialog-check input { cursor: pointer; accent-color: #3b82f6; }

    /* Inline dialog dentro do Layout Manager (substitui prompt/confirm nativos) */
    .rel-lm-dialog-overlay {
        position: absolute; inset: 0; z-index: 10;
        background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
        display: flex; align-items: center; justify-content: center;
        animation: relLmFade .15s;
    }
    .rel-lm-dialog {
        background: var(--bg-card, #fff); color: var(--text-primary, #0f172a);
        border: 1px solid var(--border-color, #cbd5e1);
        border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.45);
        width: 420px; max-width: 90%;
        padding: 16px 18px;
    }
    html:not(.light) .rel-lm-dialog { background: #0f172a; color: #e2e8f0; border-color: #334155; }
    .rel-lm-dialog-title { font-weight: 700; font-size: 14px; margin-bottom: 12px; color: #3b82f6; }
    html:not(.light) .rel-lm-dialog-title { color: #93c5fd; }
    .rel-lm-dialog-body { margin-bottom: 14px; }
    .rel-lm-dialog-lbl {
        display: block; font-size: 11px; font-weight: 600;
        color: #64748b; margin-bottom: 6px;
        letter-spacing: .04em; text-transform: uppercase;
    }
    .rel-lm-dialog-input {
        width: 100%; padding: 9px 12px;
        background: rgba(255,255,255,.04);
        border: 1px solid var(--border-color, #cbd5e1);
        border-radius: 6px; font-size: 13px; color: inherit;
        outline: none; transition: border-color .12s, box-shadow .12s;
    }
    .rel-lm-dialog-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.20); }
    html:not(.light) .rel-lm-dialog-input { background: #1e293b; border-color: #475569; }
    .rel-lm-dialog-msg { font-size: 13px; line-height: 1.5; color: inherit; }
    .rel-lm-dialog-actions {
        display: flex; justify-content: flex-end; gap: 8px;
    }
    .rel-lm-dlg-btn { padding: 7px 16px !important; min-width: 90px; justify-content: center !important; }
    .rel-lm-dlg-btn-danger {
        background: linear-gradient(180deg, #ef4444, #dc2626) !important;
        border-color: #b91c1c !important; color: #fff !important;
        box-shadow: 0 2px 6px rgba(220,38,38,.30) !important;
    }
    .rel-lm-dlg-btn-danger:hover:not(:disabled) {
        background: linear-gradient(180deg, #dc2626, #b91c1c) !important;
    }

    /* ── Modal de confirmação elegante (perguntas com ícone) ─────────────── */
    .rel-cf-overlay {
        position: fixed; inset: 0; z-index: 5000;
        display: flex; align-items: center; justify-content: center;
        background: rgba(2,6,23,.55); backdrop-filter: blur(4px);
        animation: relCfFade .16s ease;
    }
    .rel-cf-modal {
        width: min(430px, 92vw);
        background: var(--bg-card, #fff); color: var(--text-primary, #0f172a);
        border: 1px solid var(--border-color, #cbd5e1);
        border-radius: 16px; padding: 28px 26px 20px;
        box-shadow: 0 24px 60px rgba(0,0,0,.45);
        text-align: center;
        animation: relCfPop .2s cubic-bezier(.2,.9,.3,1.25);
    }
    html:not(.light) .rel-cf-modal { background: #0f172a; color: #e2e8f0; border-color: #334155; }
    .rel-cf-ico {
        width: 62px; height: 62px; margin: 2px auto 16px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 50%;
        color: var(--cf-accent, #3b82f6);
        background: color-mix(in srgb, var(--cf-accent, #3b82f6) 16%, transparent);
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--cf-accent, #3b82f6) 7%, transparent);
    }
    .rel-cf-ico svg { width: 30px; height: 30px; }
    .rel-cf-titulo { font-weight: 700; font-size: 17px; margin-bottom: 7px; }
    .rel-cf-msg { font-size: 13.5px; line-height: 1.5; color: #64748b; margin-bottom: 22px; }
    html:not(.light) .rel-cf-msg { color: #94a3b8; }
    .rel-cf-actions { display: flex; gap: 10px; justify-content: center; }
    .rel-cf-btn {
        flex: 1; max-width: 165px; padding: 11px 18px;
        border-radius: 11px; font-weight: 600; font-size: 13.5px; cursor: pointer;
        border: 1px solid transparent; transition: filter .15s, background .15s, border-color .15s, color .15s;
    }
    .rel-cf-btn-cancel { background: transparent; border-color: var(--border-color, #cbd5e1); color: #64748b; }
    .rel-cf-btn-cancel:hover { background: rgba(148,163,184,.14); color: var(--text-primary, #0f172a); }
    html:not(.light) .rel-cf-btn-cancel { border-color: #475569; color: #94a3b8; }
    html:not(.light) .rel-cf-btn-cancel:hover { color: #e2e8f0; }
    .rel-cf-btn-ok {
        background: var(--cf-accent, #3b82f6); color: #fff;
        box-shadow: 0 4px 14px color-mix(in srgb, var(--cf-accent, #3b82f6) 40%, transparent);
    }
    .rel-cf-btn-ok:hover { filter: brightness(1.08); }
    @keyframes relCfFade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes relCfPop { from { opacity: 0; transform: translateY(10px) scale(.95); } to { opacity: 1; transform: none; } }

    /* ── Painel lateral de Detalhes (Capturas OCR) ───────────────────── */
    /* "Filtros aplicados" dentro da barra de agrupamento (antes do Layout) */
    .rel-filtros-count-bar { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; white-space: nowrap; font-size: 12px; }

    /* Cards de indicadores (Capturas OCR) */
    .rel-ocr-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 12px; }
    .rel-ocr-kpis:empty { display: none; }
    .rel-ocr-kpi {
        flex: 1 1 0; min-width: 150px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
        background: color-mix(in srgb, var(--c, #3b82f6) 9%, var(--bg-card, #1e293b));
        border: 1px solid color-mix(in srgb, var(--c, #3b82f6) 28%, transparent);
        border-radius: 10px; padding: 10px 14px;
    }
    .rel-ocr-kpi-body { min-width: 0; }
    .rel-ocr-kpi-lbl { font-size: 11px; font-weight: 700; color: var(--c, #3b82f6); line-height: 1.15; margin-bottom: 4px; }
    .rel-ocr-kpi-val { font-size: 24px; font-weight: 800; color: var(--text-primary, #e2e8f0); line-height: 1; }
    .rel-ocr-kpi-pct { font-size: 11px; font-weight: 600; color: var(--text-secondary, #94a3b8); margin-top: 3px; }
    html.light .rel-ocr-kpi-val { color: #0f172a; }
    .rel-ocr-kpi-ico {
        flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: #fff; background: var(--c, #3b82f6);
        box-shadow: 0 2px 8px color-mix(in srgb, var(--c, #3b82f6) 45%, transparent);
    }

    /* Shell: coluna (toolbar + grid) à esquerda + painel de detalhes à direita */
    .rel-cap-shell { display: flex; gap: 10px; flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden; }
    .rel-cap-col   { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; }

    /* Painel fixado à direita, do topo do card de agrupamento até a base do grid */
    .rel-cd-panel {
        position: relative; flex: 0 0 380px; width: 380px; max-width: 42vw; align-self: stretch; min-height: 0;
        background: var(--card-bg, #1e293b); color: var(--text-primary, #e2e8f0);
        border: 1px solid var(--border-color, rgba(148,163,184,.25)); border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0,0,0,.22);
        z-index: 5; display: flex; flex-direction: column; overflow: hidden;
        animation: relCdSlide .18s ease-out;
    }
    @keyframes relCdSlide { from { transform: translateX(20px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }
    .rel-cd-hdr {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 14px; border-bottom: 1px solid var(--border-color, rgba(148,163,184,.2));
        flex: 0 0 auto;
    }
    .rel-cd-hdr strong { font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
    .rel-cd-hdr-ico { flex: 0 0 auto; color: #3b82f6; }
    /* Botão retrair/expandir */
    .rel-cd-toggle {
        background: transparent; border: 1px solid var(--border-color, rgba(148,163,184,.25));
        border-radius: 6px; color: var(--text-secondary, #94a3b8);
        width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
        cursor: pointer; transition: background .15s, color .15s;
    }
    .rel-cd-toggle:hover { background: rgba(148,163,184,.15); color: var(--text-primary, #e2e8f0); }
    .rel-cd-toggle svg { transition: transform .2s; }
    /* Estado retraído: vira uma faixa fina com o título na vertical */
    .rel-cd-panel.rel-cd-collapsed { flex: 0 0 38px; width: 38px; }
    .rel-cd-collapsed .rel-cd-body { display: none; }
    .rel-cd-collapsed .rel-cd-hdr {
        flex-direction: column; align-items: center; gap: 10px; padding: 10px 6px;
        border-bottom: none; height: 100%;
    }
    .rel-cd-collapsed .rel-cd-hdr strong {
        writing-mode: vertical-rl; transform: rotate(180deg); gap: 8px;
        font-size: 12px; letter-spacing: .04em;
        flex: 1 1 auto; justify-content: center;   /* centraliza o título na vertical */
    }
    .rel-cd-collapsed .rel-cd-hdr-ico { transform: rotate(90deg); }
    .rel-cd-collapsed .rel-cd-toggle { order: -1; }
    .rel-cd-collapsed .rel-cd-toggle svg { transform: rotate(180deg); }
    .rel-cd-close {
        background: transparent; border: none; color: var(--text-secondary, #94a3b8);
        font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 4px;
    }
    .rel-cd-close:hover { background: rgba(148,163,184,.15); color: var(--text-primary, #e2e8f0); }
    .rel-cd-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 14px; }
    /* Estado vazio (nenhum registro selecionado) */
    .rel-cd-empty {
        height: 100%; min-height: 220px; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 12px; text-align: center;
        color: var(--text-secondary, #94a3b8); padding: 24px;
    }
    .rel-cd-empty svg { opacity: .5; }
    .rel-cd-empty span { font-size: 13px; max-width: 220px; }
    .rel-cd-plate-row { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
    /* Linha do topo: placa + card de situação */
    .rel-cd-top { display: flex; align-items: stretch; gap: 14px; margin-bottom: 12px; }
    .rel-cd-plate-lbl {
        display: flex; align-items: center; gap: 6px;
        font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
        color: var(--text-secondary, #94a3b8); margin-bottom: 6px;
    }
    .rel-cd-plate-lbl svg { width: 16px; height: 16px; }
    .rel-cd-plate-wrap { flex: 0 0 auto; }
    /* Placa com largura fixa (menor) — não encolhe por causa do badge ao lado */
    .rel-cd-plate-wrap .placa { width: 118px; max-width: 118px; }
    .rel-cd-plate-wrap .placa-grande .placa-num { font-size: 15px; letter-spacing: .5px; white-space: nowrap; padding: 2px 4px; }
    .rel-cd-plate-wrap .placa-grande .placa-city,
    .rel-cd-plate-wrap .placa-grande .placa-m-top { font-size: 7px; padding: 1px 4px; }
    .rel-cd-plate-wrap .placa-grande .placa-m-br { font-size: 7px; padding: 3px 2px; }
    .rel-cd-plate-wrap .placa-grande .placa-m-flag { width: 12px; height: 8px; }
    /* Card de situação (ícone circular + título + descrição) */
    .rel-cd-situ {
        flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
        background: rgba(148,163,184,.08); border: 1px solid var(--border-color, rgba(148,163,184,.22));
        border-radius: 10px; padding: 7px 11px;
    }
    .rel-cd-situ-ico {
        flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: var(--c, #94a3b8); border: 1.5px solid color-mix(in srgb, var(--c, #94a3b8) 55%, transparent);
        background: color-mix(in srgb, var(--c, #94a3b8) 12%, transparent);
    }
    .rel-cd-situ-ico svg { width: 16px; height: 16px; }
    .rel-cd-situ-txt { min-width: 0; border-left: 1px solid var(--border-color, rgba(148,163,184,.22)); padding-left: 10px; }
    .rel-cd-situ-title { font-size: 12px; font-weight: 700; color: var(--text-primary, #e2e8f0); line-height: 1.2; }
    .rel-cd-situ-sub { font-size: 10px; color: var(--text-secondary, #94a3b8); margin-top: 1px; }

    /* Faixa de infos (Data/Hora, Tíquete, Notificado) com ícone circular */
    .rel-cd-hdr-info { display: flex; align-items: stretch; }
    .rel-cd-info-item { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 2px 8px; }
    .rel-cd-info-item + .rel-cd-info-item { border-left: 1px solid var(--border-color, rgba(148,163,184,.2)); }
    .rel-cd-info-item:first-child { padding-left: 0; }
    .rel-cd-info-item:last-child { padding-right: 0; }
    .rel-cd-info-ico {
        flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: var(--c, #3b82f6); background: color-mix(in srgb, var(--c, #3b82f6) 16%, transparent);
    }
    .rel-cd-info-ico svg { width: 17px; height: 17px; }
    .rel-cd-info-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .rel-cd-info-lbl { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary, #94a3b8); white-space: nowrap; }
    .rel-cd-info-val { font-size: 13px; font-weight: 700; color: var(--text-primary, #e2e8f0); line-height: 1.2; }
    html.light .rel-cd-info-val { color: #0f172a; }
    /* Data/Hora empilhada: data (negrito) + hora (secundária) */
    .rel-cd-dt { display: flex; flex-direction: column; line-height: 1.15; }
    .rel-cd-dt-d { font-size: 12px; font-weight: 700; white-space: nowrap; }
    .rel-cd-dt-t { font-size: 11px; font-weight: 600; color: var(--text-secondary, #94a3b8); }
    /* Separador horizontal */
    .rel-cd-sep { height: 1px; background: var(--border-color, rgba(148,163,184,.2)); margin: 12px 0; }

    /* ── Placa veicular estilizada (mesmo modelo do Mosaico Captura) ── */
    @font-face {
        font-family: 'PlacaMercosul';
        src: url('/fonts/saira-condensed-800.woff2') format('woff2');
        font-weight: 800; font-style: normal; font-display: swap;
    }
    @font-face {
        font-family: 'PlacaAntiga';
        src: url('/fonts/oswald-700.woff2') format('woff2');
        font-weight: 700; font-style: normal; font-display: swap;
    }
    .placa {
        display: inline-flex; flex-direction: column;
        border: 2px solid #111; border-radius: 5px;
        overflow: hidden; width: 100%; background: #f0f0e8;
        box-shadow: 0 1px 4px rgba(0,0,0,.5);
    }
    .placa-normal .placa-num {
        font-family: 'PlacaAntiga','Arial Narrow','Arial',sans-serif;
        font-size: 17px; font-weight: 700; color: #111;
        text-align: center; letter-spacing: 2px; padding: 2px 4px; line-height: 1.2;
    }
    .placa-normal .placa-city {
        font-size: 7px; font-weight: 700; color: #555; text-align: center;
        letter-spacing: .04em; border-bottom: 1px solid #999; padding: 1px 4px; background: #ddd;
    }
    .placa-mercosul .placa-m-top {
        background: #003399; color: #fff; display: flex; align-items: center; justify-content: center;
        gap: 4px; font-size: 7px; font-weight: 700; letter-spacing: .12em; padding: 2px 4px;
    }
    .placa-mercosul .placa-m-top .placa-m-flag {
        width: 12px; height: 8px; display: inline-block; border-radius: 1px; flex-shrink: 0;
        background: linear-gradient(180deg,#009c3b 33%,#ffdf00 33%,#ffdf00 66%,#009c3b 66%);
    }
    .placa-mercosul .placa-m-body { display: flex; align-items: stretch; background: #f0f0e8; }
    .placa-mercosul .placa-m-br {
        background: #003399; color: #fff; font-size: 7px; font-weight: 900; letter-spacing: .05em;
        writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
        padding: 3px 2px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .placa-mercosul .placa-num {
        flex: 1; text-align: center;
        font-family: 'PlacaMercosul','Arial Narrow','Arial',sans-serif;
        font-size: 17px; font-weight: 800; color: #111; letter-spacing: 1px; padding: 2px 4px; line-height: 1.2;
    }
    .placa-grande .placa-num    { font-size: 28px; letter-spacing: 3px; padding: 4px 8px; }
    .placa-grande .placa-city   { font-size: 9px; padding: 2px 6px; }
    .placa-grande .placa-m-top  { font-size: 9px; padding: 3px 8px; }
    .placa-grande .placa-m-br   { font-size: 9px; padding: 4px 3px; }
    .placa-grande .placa-m-flag { width: 16px; height: 11px; }
    .rel-cd-badge {
        background: #f59e0b; color: #1a1206; font-weight: 700; font-size: 11px;
        padding: 5px 10px; border-radius: 12px; line-height: 1.3;
        flex: 1 1 130px; min-width: 0; text-align: center; align-self: center;
    }
    /* Abas (Foto / Veículo / Ocorrência / Localização / Horário) */
    .rel-cd-tabs {
        display: flex; flex-wrap: nowrap; gap: 2px; margin-bottom: 10px;
        border-bottom: 1px solid var(--border-color, rgba(148,163,184,.2));
        overflow-x: auto; overflow-y: hidden;
        scrollbar-width: none; -ms-overflow-style: none;   /* Firefox / IE — sem barra */
    }
    .rel-cd-tabs::-webkit-scrollbar { display: none; }      /* Chrome/Safari/Edge — sem barra */
    .rel-cd-tabs { cursor: grab; user-select: none; }
    .rel-cd-tabs.rel-cd-tabs-drag { cursor: grabbing; }
    .rel-cd-tab { flex: 0 0 auto; }
    .rel-cd-tab {
        display: inline-flex; align-items: center; gap: 6px;
        background: transparent; border: none; cursor: pointer;
        color: var(--text-secondary, #94a3b8); font-size: 11px; font-weight: 600;
        padding: 6px 8px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
    }
    .rel-cd-tab-ico { flex: 0 0 auto; }
    .rel-cd-tab:hover { color: var(--text-primary, #e2e8f0); }
    .rel-cd-tab-on { color: #3b82f6; border-bottom-color: #3b82f6; }
    .rel-cd-media { margin-bottom: 14px; }
    .rel-cd-pane { display: none; }
    .rel-cd-pane-on { display: block; }
    .rel-cd-foto-wrap { margin-bottom: 12px; }
    /* Visualizador unificado (OCR / Panorâmica / Vídeo) */
    .rel-cd-stage {
        position: relative; width: 100%; height: 240px; background: #000;
        border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center;
        border: 1px solid var(--border-color, rgba(148,163,184,.18));
    }
    .rel-cd-stage-load { font-size: 12px; color: var(--text-secondary, #94a3b8); }
    .rel-cd-stage-img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .rel-cd-stage-badge {
        position: absolute; top: 8px; left: 8px; z-index: 3;
        background: rgba(15,23,42,.82); color: #fff; font-size: 11px; font-weight: 700;
        padding: 3px 9px; border-radius: 999px; letter-spacing: .03em;
    }
    .rel-cd-stage-full {
        position: absolute; top: 6px; right: 6px; z-index: 3;
        width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
        background: rgba(15,23,42,.7); border: 1px solid rgba(255,255,255,.18); color: #e2e8f0; cursor: pointer;
    }
    .rel-cd-stage-full:hover { background: rgba(59,130,246,.55); }
    .rel-cd-stage-nav {
        position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
        width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        background: rgba(15,23,42,.6); border: 1px solid rgba(255,255,255,.18); color: #fff; cursor: pointer;
    }
    .rel-cd-stage-nav:hover { background: rgba(15,23,42,.9); }
    .rel-cd-stage-prev { left: 8px; }
    .rel-cd-stage-next { right: 8px; }
    .rel-cd-stage-vid {
        position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
        display: flex; align-items: center; gap: 8px; padding: 8px 10px;
        background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
    }
    .rel-cd-vid-play { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); color: #fff; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; flex: 0 0 auto; font-size: 12px; }
    .rel-cd-vid-range { flex: 1; accent-color: #3b82f6; }
    .rel-cd-vid-lbl { font-size: 11px; color: #e2e8f0; min-width: 54px; text-align: right; }
    /* Tela cheia */
    .rel-cd-stage:fullscreen { width: 100vw; height: 100vh; border-radius: 0; background: #000; }
    .rel-cd-stage:fullscreen .rel-cd-stage-img { object-fit: contain; }
    .rel-cd-foto img { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
    .rel-cd-foto-load, .rel-cd-foto-empty { font-size: 12px; color: var(--text-secondary, #94a3b8); }
    .rel-cd-sec { margin-bottom: 14px; }
    .rel-cd-sec-title {
        font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
        color: #3b82f6; padding-bottom: 5px; margin-bottom: 9px;
        border-bottom: 1px solid var(--border-color, rgba(148,163,184,.2));
    }
    .rel-cd-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; }
    .rel-cd-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .rel-cd-field-full { grid-column: 1 / -1; }
    .rel-cd-flbl { font-size: 9px; letter-spacing: .04em; color: var(--text-secondary, #94a3b8); text-transform: uppercase; }
    .rel-cd-fval { font-size: 12px; color: var(--text-primary, #e2e8f0); word-break: break-word; }
    .rel-cd-vaga { display: inline-flex; align-items: center; gap: 6px; }
    .rel-cd-vaga-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
    .rel-cd-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
    .rel-cd-pill-ok { background: rgba(16,185,129,.18); color: #10b981; }
    .rel-cd-pill-no { background: rgba(239,68,68,.16); color: #ef4444; }
    .rel-cd-pill-neutral { background: rgba(148,163,184,.16); color: var(--text-secondary, #94a3b8); }
    .rel-cd-map { position: relative; width: 100%; height: 220px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color, rgba(148,163,184,.18)); margin-top: 12px; }
    /* Legenda do mapa no TOPO (só no painel Capturas OCR; sobrepõe o inline do mosaico-mapa.js) */
    .rel-cd-map .mos-leg-wrap { top: 10px !important; bottom: auto !important; }
    /* Marcador da VTR (mesmo do Mosaico Captura) */
    .mos-map-viat-dot {
        width: 14px; height: 14px; border-radius: 50%;
        background: #22c55e; border: 2px solid #fff;
        box-shadow: 0 0 0 0 rgba(34,197,94,.6);
        animation: mos-viat-dot-pulse 2s ease-out infinite;
    }
    @keyframes mos-viat-dot-pulse {
        0%   { box-shadow: 0 0 0 0    rgba(34,197,94,.6); }
        70%  { box-shadow: 0 0 0 10px rgba(34,197,94,.0); }
        100% { box-shadow: 0 0 0 0    rgba(34,197,94,.0); }
    }
    .rel-cd-map-empty { display: flex; align-items: center; justify-content: center; background: #0f172a; font-size: 12px; color: var(--text-secondary, #94a3b8); }
    /* Botão "Copiar coordenadas" abaixo do mapa */
    .rel-cd-copy-coord {
        display: flex; align-items: center; justify-content: center; gap: 7px;
        width: 100%; margin-top: 10px; padding: 9px 12px;
        background: rgba(148,163,184,.08); color: var(--text-primary, #e2e8f0);
        border: 1px solid var(--border-color, rgba(148,163,184,.28)); border-radius: 8px;
        font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
    }
    .rel-cd-copy-coord:hover { background: rgba(59,130,246,.14); border-color: #3b82f6; color: #3b82f6; }
    .rel-cd-copy-coord.rel-cd-copy-ok { background: rgba(16,185,129,.16); border-color: #10b981; color: #10b981; }
    /* Tema claro */
    html.light .rel-cd-panel { background: #ffffff; color: #0f172a; }
    html.light .rel-cd-foto, html.light .rel-cd-map-empty { background: #f1f5f9; }
    html.light .rel-cd-fval { color: #0f172a; }

    /* Lote Validação — banner de sucesso + botão Gerar Lote */
    .rel-info-banner { background: rgba(16,185,129,.14); border: 1px solid #10b981; color: #10b981; padding: 8px 12px; border-radius: 8px; font-size: 13px; margin: 0 0 8px; }
    html.light .rel-info-banner { background: #ecfdf5; border-color: #6ee7b7; color: #047857; }
    .rel-btn-gerar { background: #16a34a; border-color: #16a34a; }
    .rel-btn-gerar:hover:not(:disabled) { background: #15803d; border-color: #15803d; }

    /* Lote Validação — painel lateral (Resumo + Ações) */
    .rel-lote-panel .rel-cd-body { padding: 12px; display: flex; flex-direction: column; gap: 14px; }
    .rel-lote-card, .rel-lote-acoes { background: rgba(255,255,255,.03); border: 1px solid rgba(148,163,184,.18); border-radius: 12px; padding: 12px 14px; }
    html.light .rel-lote-card, html.light .rel-lote-acoes { background: #f8fafc; border-color: #e2e8f0; }
    .rel-lote-card-tt { font-size: 12px; font-weight: 700; letter-spacing:.02em; color: #94a3b8; text-transform: none; margin-bottom: 8px; }
    .rel-lote-sel { color: #3b82f6; font-weight: 700; }
    .rel-lote-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(148,163,184,.12); }
    .rel-lote-row:first-of-type { border-top: none; }
    .rel-lote-row-ic { flex: 0 0 auto; display: inline-flex; }
    .rel-lote-row-lbl { flex: 1; font-size: 13px; color: #cbd5e1; }
    html.light .rel-lote-row-lbl { color: #334155; }
    .rel-lote-row-val { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
    /* Ações */
    .rel-lote-acao { width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left; background: transparent; border: none; border-top: 1px solid rgba(148,163,184,.12); padding: 10px 4px; cursor: pointer; color: inherit; border-radius: 8px; transition: background .12s; }
    .rel-lote-acao:first-of-type { border-top: none; }
    .rel-lote-acao:hover { background: rgba(59,130,246,.10); }
    .rel-lote-acao-ic { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(59,130,246,.14); color: #3b82f6; }
    .rel-lote-acao-tx { display: flex; flex-direction: column; gap: 2px; }
    .rel-lote-acao-tt { font-size: 13px; font-weight: 700; color: #e2e8f0; }
    html.light .rel-lote-acao-tt { color: #0f172a; }
    .rel-lote-acao-ds { font-size: 11.5px; color: #94a3b8; line-height: 1.35; }
    .rel-lote-acao-off { opacity: .45; cursor: not-allowed; }
    .rel-lote-acao-off:hover { background: transparent; }
    /* Long-press (manter pressionado para acionar) */
    .rel-lote-acao { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
    .rel-lote-acao-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(34,197,94,.22); z-index: 0; pointer-events: none; border-radius: 8px; }
    /* Finalizar Lote: preenchimento do long-press em laranja */
    .rel-lote-acao[data-acao="finalizar"] .rel-lote-acao-fill { background: rgba(249,115,22,.28); }
    .rel-lote-acao > .rel-lote-acao-ic, .rel-lote-acao > .rel-lote-acao-tx { position: relative; z-index: 1; }
    .rel-lote-acao-hold { background: rgba(59,130,246,.08); }
    /* Célula LOTE com ícone de cadeado (aberto/fechado) */
    .rel-lote-cell { display: inline-flex; align-items: center; gap: 6px; }
    .rel-lote-cell svg { flex: 0 0 auto; }

    /* ── Módulo Validação (Validar AIT's) ── */
    .val-loading, .val-empty { padding: 24px; color: #94a3b8; font-size: 14px; display: flex; align-items: center; gap: 10px; }
    .val-shell { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 14px; align-items: start; }
    @media (max-width: 900px) { .val-shell { grid-template-columns: 1fr; } }
    .val-col { background: rgba(255,255,255,.03); border: 1px solid rgba(148,163,184,.18); border-radius: 12px; padding: 14px; }
    html.light .val-col { background: #ffffff; border-color: #e2e8f0; }
    .val-sec-tt { font-size: 12px; font-weight: 700; color: #94a3b8; margin: 4px 0 8px; text-transform: uppercase; letter-spacing: .03em; }
    .val-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
    .val-field { display: flex; flex-direction: column; gap: 1px; padding: 3px 0; border-bottom: 1px solid rgba(148,163,184,.10); }
    .val-field-full { grid-column: 1 / -1; }
    .val-field-lbl { font-size: 11px; color: #94a3b8; }
    .val-field-val { font-size: 13px; color: #cbd5e1; }
    html.light .val-field-val { color: #0f172a; }
    .val-field-strong { font-weight: 800; color: #3b82f6; }
    .val-motivo { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(148,163,184,.3); background: #1e293b; color: #e2e8f0; font-size: 13px; }
    html.light .val-motivo { background: #f8fafc; color: #0f172a; }
    /* Opções do dropdown legíveis no tema escuro */
    .val-motivo option { background: #1e293b; color: #e2e8f0; }
    html.light .val-motivo option { background: #ffffff; color: #0f172a; }
    /* Imagens */
    .val-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
    .val-tab { padding: 6px 14px; border-radius: 8px 8px 0 0; border: none; background: transparent; color: #94a3b8; font-size: 13px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; }
    .val-tab-on { color: #3b82f6; border-bottom-color: #3b82f6; }
    .val-img-wrap { display: flex; gap: 10px; }
    .val-img-main { flex: 1; min-height: 320px; display: flex; align-items: center; justify-content: center; background: #0b1220; border-radius: 10px; overflow: hidden; }
    html.light .val-img-main { background: #f1f5f9; }
    .val-img-main img { max-width: 100%; max-height: 460px; object-fit: contain; }
    .val-img-msg { color: #94a3b8; font-size: 13px; display: flex; align-items: center; gap: 8px; }
    .val-thumbs { display: flex; flex-direction: column; gap: 8px; width: 78px; }
    .val-thumb { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #0b1220; cursor: pointer; height: 58px; }
    .val-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .val-thumb-on { border-color: #3b82f6; }
    .val-img-info { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }
    .val-img-info .lbl { color: #94a3b8; }
    .val-geo-coords { font-size: 13px; margin-bottom: 8px; color: #cbd5e1; }
    .val-geo-map { width: 100%; height: 420px; border: 0; border-radius: 10px; }
    /* Barra inferior */
    .val-bottom { display: flex; align-items: center; gap: 20px; margin-top: 14px; padding: 12px 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(148,163,184,.18); border-radius: 12px; }
    html.light .val-bottom { background: #ffffff; border-color: #e2e8f0; }
    .val-nav { display: flex; align-items: center; gap: 6px; }
    .val-nav-btn { min-width: 34px; height: 30px; border-radius: 7px; border: 1px solid rgba(148,163,184,.3); background: transparent; color: inherit; cursor: pointer; font-weight: 700; }
    .val-nav-btn:disabled { opacity: .4; cursor: not-allowed; }
    .val-nav-pos { font-size: 13px; color: #94a3b8; padding: 0 6px; }
    .val-situacao { margin-left: auto; text-align: right; }
    .val-sit-total { font-size: 30px; font-weight: 800; line-height: 1; }
    .val-sit-sub { display: flex; gap: 12px; justify-content: flex-end; font-size: 12px; margin-top: 2px; }
    .val-sit-ace { color: #22c55e; }
    .val-sit-rej { color: #ef4444; }
    .val-actions { display: flex; gap: 8px; }
    .val-btn-recusar { background: #dc2626; border-color: #dc2626; }
    .val-btn-recusar:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; }

    /* ── Validação v2 (fluxo orientado à evidência) ── */
    .val2-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
    .val2-head-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .val2-ait { font-size: 15px; font-weight: 800; color: #2563EB; }
    .val2-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; background: rgba(148,163,184,.14); border: 1px solid rgba(148,163,184,.2); padding: 3px 10px; border-radius: 999px; color: #cbd5e1; }
    html.light .val2-chip { color: #334155; background: #f1f5f9; }
    .val2-status { margin-left: auto; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
    .val2-status-pend { background: rgba(245,158,11,.16); color: #f59e0b; }
    .val2-status-ok   { background: rgba(22,163,74,.16);  color: #16a34a; }
    .val2-status-rej  { background: rgba(220,38,38,.16);  color: #dc2626; }
    .val2-status-rev  { background: rgba(37,99,235,.16);  color: #2563EB; }
    /* Layout principal: [info esquerda | evidência centro | galeria direita] */
    .val2-main { display: grid; grid-template-columns: 360px 1fr 120px; gap: 12px; align-items: start; }
    .val2-main > .val2-info { order: 1; margin-top: 0; }
    .val2-main > .val2-evi-wrap { order: 2; }
    .val2-main > .val2-gallery { order: 3; }
    @media (max-width: 1100px) { .val2-main { grid-template-columns: 320px 1fr; } .val2-main > .val2-gallery { order: 3; grid-column: 1 / -1; flex-direction: row; overflow-x: auto; max-height: none; } }
    @media (max-width: 720px) { .val2-main { grid-template-columns: 1fr; } }
    .val2-evi-wrap { display: flex; flex-direction: column; gap: 8px; }
    .val2-evi { position: relative; background: #0b1220; border-radius: 12px; min-height: 46vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    html.light .val2-evi { background: #e9edf3; }
    .val2-evi img { max-width: 100%; max-height: 62vh; object-fit: contain; }
    .val2-evi-pan { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; will-change: transform; }
    .val2-evi.pannable { cursor: grab; }
    .val2-evi.pannable.panning { cursor: grabbing; }
    .val2-evi.pannable img { transition: none !important; }
    .val2-evi-badge { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 6px; }
    .val2-evi-tools { display: flex; gap: 6px; flex-wrap: wrap; }
    .val2-tool { font-size: 12.5px; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(148,163,184,.3); background: rgba(255,255,255,.04); color: inherit; cursor: pointer; }
    .val2-tool:hover:not(:disabled) { background: rgba(37,99,235,.12); border-color: #2563EB; color: #2563EB; }
    .val2-tool:disabled { opacity: .4; cursor: not-allowed; }
    .val2-zoom { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }
    .val2-zoom-lbl { min-width: 54px; text-align: center; font-variant-numeric: tabular-nums; }
    .val2-gallery { display: flex; flex-direction: column; gap: 8px; max-height: 62vh; overflow-y: auto; }
    .val2-gallery-tt { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; }
    .val2-gallery-empty { color: #64748b; font-size: 13px; }
    .val2-thumb { position: relative; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; height: 84px; background: #0b1220; cursor: pointer; }
    .val2-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .val2-thumb-on { border-color: #2563EB; }
    .val2-thumb-n { position: absolute; left: 4px; top: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 4px; }
    /* Abas de contexto */
    .val2-info { background: rgba(255,255,255,.03); border: 1px solid rgba(148,163,184,.18); border-radius: 12px; }
    html.light .val2-info { background: #fff; border-color: #e2e8f0; }
    .val2-tabs { display: flex; gap: 2px; border-bottom: 1px solid rgba(148,163,184,.18); padding: 6px 6px 0; }
    .val2-tab { padding: 8px 12px; border: none; background: transparent; color: #94a3b8; font-size: 12.5px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; }
    .val2-tab.on { color: #2563EB; border-bottom-color: #2563EB; }
    .val2-tab-body { padding: 12px; max-height: 62vh; overflow-y: auto; }
    /* Painel estreito à esquerda → campos em coluna única */
    .val2-fields { display: grid; grid-template-columns: 1fr; gap: 4px 0; }
    .val2-f { display: flex; flex-direction: column; gap: 1px; padding: 3px 0; border-bottom: 1px solid rgba(148,163,184,.1); }
    .val2-f-full { grid-column: 1 / -1; }
    .val2-f-lbl { font-size: 11px; color: #94a3b8; }
    .val2-f-val { font-size: 13.5px; color: #e2e8f0; font-weight: 600; }
    html.light .val2-f-val { color: #0f172a; }
    .val2-ocr-cmp { margin-top: 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; }
    .val2-ocr-cmp.ok { background: rgba(22,163,74,.14); color: #16a34a; }
    .val2-ocr-cmp.warn { background: rgba(245,158,11,.16); color: #f59e0b; }
    .val2-geo-info { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; margin-bottom: 8px; color: #cbd5e1; }
    html.light .val2-geo-info { color: #334155; }
    .val2-geo-map { width: 100%; height: 46vh; border: 0; border-radius: 10px; }
    /* Motivo + observações */
    .val2-recusa { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 14px; margin-top: 14px; }
    @media (max-width: 720px) { .val2-recusa { grid-template-columns: 1fr; } }
    .val2-recusa-col { display: flex; flex-direction: column; gap: 4px; }
    .val2-lbl { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; }
    /* Barra inferior */
    .val2-bottom { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(148,163,184,.18); border-radius: 12px; position: sticky; bottom: 0; }
    html.light .val2-bottom { background: #fff; border-color: #e2e8f0; }
    .val2-ind { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: #94a3b8; }
    .val2-ind-item strong { color: #e2e8f0; }
    html.light .val2-ind-item strong { color: #0f172a; }
    .val2-ind-pend strong { color: #f59e0b; }
    .val2-ind-ace strong  { color: #16a34a; }
    .val2-ind-rej strong  { color: #dc2626; }
    .val2-ind-rev strong  { color: #2563EB; }
    .val2-progress { width: 120px; height: 8px; background: rgba(148,163,184,.25); border-radius: 999px; overflow: hidden; }
    .val2-progress-bar { display: block; height: 100%; background: #2563EB; transition: width .25s; }
    .val2-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
    .val2-btn { font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; color: #fff; }
    .val2-btn-ok  { background: #16a34a; } .val2-btn-ok:hover { background: #15803d; }
    .val2-btn-rej { background: #dc2626; } .val2-btn-rej:hover { background: #b91c1c; }
    .val2-btn-rev { background: #f59e0b; } .val2-btn-rev:hover { background: #d97706; }
    .val2-btn-all { background: #2563EB; } .val2-btn-all:hover { background: #1d4ed8; }
    .val2-btn-sair { background: transparent; color: inherit; border-color: rgba(148,163,184,.3); }
    .val2-btn-sair:hover { background: rgba(148,163,184,.12); }
    /* Comparar */
    .val2-cmp-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1000; display: flex; align-items: center; justify-content: center; }
    .val2-cmp { width: min(1000px, 94vw); background: #0f172a; border: 1px solid rgba(148,163,184,.25); border-radius: 12px; overflow: hidden; }
    html.light .val2-cmp { background: #fff; }
    .val2-cmp-hdr { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(148,163,184,.2); }
    .val2-cmp-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
    .val2-cmp-side { display: flex; flex-direction: column; gap: 8px; }
    .val2-cmp-side select { padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(148,163,184,.3); background: #1e293b; color: #e2e8f0; }
    html.light .val2-cmp-side select { background: #f8fafc; color: #0f172a; }
    .val2-cmp-side select option { background: #1e293b; color: #e2e8f0; }
    html.light .val2-cmp-side select option { background: #ffffff; color: #0f172a; }
    .val2-cmp-img { background: #0b1220; border-radius: 10px; min-height: 320px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .val2-cmp-img img { max-width: 100%; max-height: 60vh; object-fit: contain; }
    .val2-cmp-note { padding: 0 14px 14px; font-size: 12px; color: #94a3b8; }
    /* Modal de recusa */
    .val2-recusa-modal { width: min(480px, 94vw); background: #0f172a; border: 1px solid rgba(148,163,184,.25); border-radius: 12px; overflow: hidden; }
    html.light .val2-recusa-modal { background: #fff; }
    .val2-recusa-body { padding: 16px; display: flex; flex-direction: column; }
    .val2-req { color: #dc2626; }
    .val2-obs { resize: vertical; min-height: 62px; font-family: inherit; }
    .val2-recusa-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(148,163,184,.2); }

    /* ══════════ Validação v3 (UX conforme mockup) ══════════ */
    .v3-page { display: flex; flex-direction: column; gap: 10px; }
    .v3-crumb { font-size: 13px; color: #94a3b8; display: flex; align-items: center; gap: 8px; }
    .v3-crumb-c { color: #e2e8f0; font-weight: 700; }
    html.light .v3-crumb-c { color: #0f172a; }
    .v3-crumb-sep { opacity: .6; }
    /* Barra de dados do AIT */
    /* Botão Sair (validação) */
    .v3-btn-sair { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; border-radius: 8px; border: 1px solid rgba(239,68,68,.4); background: rgba(239,68,68,.12); color: #ef4444; cursor: pointer; transition: background .15s, color .15s; }
    .v3-btn-sair:hover { background: rgba(239,68,68,.2); color: #fca5a5; }
    /* Busca de registros (cabeçalho) */
    .v3-busca { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px 5px 10px; border-radius: 9px; border: 1px solid rgba(148,163,184,.3); background: rgba(255,255,255,.04); }
    .v3-busca-ic { display: inline-flex; color: #94a3b8; flex: 0 0 auto; }
    .v3-busca input { border: none; outline: none; background: transparent; color: #e2e8f0; font-size: 12.5px; width: 220px; }
    .v3-busca input::placeholder { color: #64748b; }
    .v3-busca-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; border-radius: 5px; background: transparent; color: #94a3b8; cursor: pointer; flex: 0 0 auto; }
    .v3-busca-x:hover { background: rgba(148,163,184,.18); color: #e2e8f0; }
    html.light .v3-busca { background: #fff; border-color: #cbd5e1; }
    html.light .v3-busca input { color: #0f172a; }
    .v3-aitbar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: rgba(255,255,255,.03); border: 1px solid rgba(148,163,184,.18); border-radius: 12px; padding: 12px 16px; }
    html.light .v3-aitbar { background: #fff; border-color: #e2e8f0; }
    .v3-aitbar-id { display: flex; align-items: center; gap: 12px; padding-right: 20px; border-right: 1px solid rgba(148,163,184,.2); }
    .v3-aitbar-lbl { font-size: 11px; color: #94a3b8; }
    .v3-aitbar-num { font-size: 22px; font-weight: 800; letter-spacing: .02em; }
    .v3-aitbar-fields { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; }
    .v3-aitbar-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; align-self: center; }
    .v3-aitbar-edit { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; border-radius: 8px; border: 1px solid rgba(148,163,184,.35); background: transparent; color: #94a3b8; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
    .v3-aitbar-edit:hover { background: rgba(148,163,184,.14); color: #e2e8f0; border-color: rgba(148,163,184,.5); }
    html.light .v3-aitbar-edit { color: #475569; border-color: #cbd5e1; }
    html.light .v3-aitbar-edit:hover { background: #f1f5f9; color: #0f172a; }
    /* Modal de validação da aprovação */
    .v3-valid-modal { width: min(440px, 94vw); }
    /* Cabeçalho com fita zebrada (hazard tape) */
    .v3-valid-modal .val2-cmp-hdr {
        padding-top: 7px; padding-bottom: 7px; min-height: 0;
        background:
            linear-gradient(rgba(15,23,42,.60), rgba(15,23,42,.60)),
            repeating-linear-gradient(45deg, #f5b301 0, #f5b301 14px, #14181f 14px, #14181f 28px);
        border-bottom: 2px solid #f5b301;
    }
    .v3-valid-modal .val2-cmp-hdr .v3-valid-hd { font-size: 13.5px; }
    .v3-valid-hd { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.75); }
    .v3-valid-modal .val2-cmp-hdr .rel-btn-icon { color: #fff; }
    .v3-valid-modal .val2-cmp-hdr .rel-btn-icon:hover { background: rgba(255,255,255,.2); }
    .v3-valid-body { padding: 14px 16px 4px; }
    .v3-valid-msg { margin: 0 0 10px; font-size: 13px; color: #cbd5e1; }
    html.light .v3-valid-msg { color: #475569; }
    .v3-valid-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
    .v3-valid-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #e2e8f0; }
    html.light .v3-valid-list li { color: #0f172a; }
    .v3-valid-list li svg { color: #ef4444; flex: 0 0 auto; }
    /* Modal de edição de campos */
    .v3-edit-modal { width: min(560px, 94vw); }
    .v3-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
    .v3-edit-f { display: flex; flex-direction: column; gap: 5px; }
    .v3-edit-f .val-motivo { width: 100%; }
    .v3-edit-full { grid-column: 1 / -1; }
    .v3-edit-legend { padding: 10px 16px 0; font-size: 11.5px; color: #94a3b8; }
    .v3-edit-ro { opacity: .7; cursor: not-allowed; }
    /* Destaque de campos obrigatórios na edição */
    .v3-edit-req .val-motivo { border-color: rgba(245,158,11,.65); box-shadow: 0 0 0 1px rgba(245,158,11,.25); }
    .v3-edit-req .val2-lbl { color: #f59e0b; font-weight: 700; }
    /* Obrigatório preenchido → destaque verde */
    .v3-edit-req.v3-edit-ok .val-motivo { border-color: rgba(34,197,94,.7); box-shadow: 0 0 0 1px rgba(34,197,94,.25); }
    .v3-edit-req.v3-edit-ok .val2-lbl { color: #22c55e; }
    .val2-req { color: #ef4444; font-weight: 700; }
    .v3-af { display: flex; flex-direction: column; gap: 2px; }
    /* Placa sem label — alinhada ao topo (linha dos labels dos demais campos) */
    .v3-af-placa { justify-content: flex-start; }
    .v3-af-placa .v3-placa-wrap { margin-top: -2px; }
    .v3-af-l { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #94a3b8; text-transform: none; }
    .v3-af-ic { display: inline-flex; color: #64748b; }
    .v3-af-ic svg { width: 12px; height: 12px; }
    .v3-af-v { font-size: 14px; font-weight: 700; }
    /* Placa desenhada compacta na barra do AIT */
    .v3-placa-wrap { display: inline-block; margin-top: 2px; }
    .v3-placa-wrap .placa { width: 112px; max-width: 112px; }
    .v3-placa-wrap .placa-grande .placa-num { font-size: 15px; letter-spacing: .5px; white-space: nowrap; padding: 2px 4px; }
    .v3-placa-wrap .placa-grande .placa-city, .v3-placa-wrap .placa-grande .placa-m-top { font-size: 6.5px; padding: 1px 4px; }
    .v3-placa-wrap .placa-grande .placa-m-br { font-size: 6.5px; padding: 3px 2px; }
    .v3-placa-wrap .placa-grande .placa-m-flag { width: 11px; height: 7px; }
    .v3-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
    .v3-badge-pend { background: rgba(245,158,11,.18); color: #f59e0b; }
    .v3-badge-ok   { background: rgba(22,163,74,.18);  color: #22c55e; }
    .v3-badge-rej  { background: rgba(220,38,38,.18);  color: #ef4444; }
    /* Corpo: 3 colunas */
    /* v3-page: cabeçalho + AIT com altura natural; corpo flexiona; barra ancorada no rodapé */
    .v3-page > .page-header, .v3-page > .v3-aitbar, .v3-page > .rel-erro, .v3-page > .rel-info-banner { flex-shrink: 0; }
    .v3-page > .v3-body { flex: 1 1 auto; min-height: 0; }
    .v3-page > .v3-recusa-banner { flex-shrink: 0; }
    /* Destaque de registro recusado */
    .v3-recusa-banner { display: flex; align-items: center; gap: 12px; background: rgba(220,38,38,.14); border: 1px solid #dc2626; border-left: 4px solid #dc2626; border-radius: 10px; padding: 10px 14px; color: #fca5a5; }
    html.light .v3-recusa-banner { background: #fef2f2; color: #b91c1c; }
    .v3-rb-ic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #dc2626; color: #fff; flex: 0 0 auto; }
    .v3-rb-tx { display: flex; flex-direction: column; gap: 1px; }
    .v3-rb-tx strong { font-size: 13.5px; color: #ef4444; }
    html.light .v3-rb-tx strong { color: #b91c1c; }
    .v3-rb-tx span { font-size: 12.5px; }
    .v3-page > .v3-bottom { flex-shrink: 0; margin-top: 2px; }
    .v3-body { display: grid; grid-template-columns: 300px 1fr 232px; grid-template-rows: minmax(0, 1fr); gap: 12px; align-items: stretch; min-height: 0; max-height: calc(100vh - 210px); }
    @media (max-width: 1200px) { .v3-body { grid-template-columns: 260px 1fr; } .v3-gallery { grid-column: 1 / -1; } .v3-gallery-list { flex-direction: row; overflow-x: auto; } }
    @media (max-width: 820px) { .v3-body { grid-template-columns: 1fr; } }
    /* Acordeão (esquerda) */
    .v3-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; }
    /* Acordeão aberto ocupa o espaço e rola internamente; fechado fica só com o cabeçalho */
    .v3-acc-open { flex: 1 1 0; min-height: 90px; display: flex; flex-direction: column; }
    .v3-acc-hd { flex-shrink: 0; }
    .v3-acc-open > .v3-acc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    /* Abas Fotos / Vídeo (painel central da evidência) */
    .v3-evi-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
    .v3-etab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; border: 1px solid rgba(148,163,184,.22); border-radius: 9px; background: rgba(255,255,255,.03); color: #94a3b8; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
    .v3-etab:hover { color: #e2e8f0; border-color: rgba(148,163,184,.4); }
    .v3-etab.on { background: #2563eb; border-color: #2563eb; color: #fff; }
    html.light .v3-etab { background: #fff; border-color: #e2e8f0; color: #475569; }
    html.light .v3-etab.on { background: #2563eb; border-color: #2563eb; color: #fff; }
    /* Palco do vídeo */
    .v3-video-stage { flex-direction: column; padding: 0; }
    .v3-video-el { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; background: #000; }
    .v3-video-frames { width: 100%; height: 100%; display: flex; flex-direction: column; }
    /* Aba Localização (mapa Mapbox no painel central) */
    .v3-map-stage { display: block; padding: 0; overflow: hidden; }
    .v3-map-tab { width: 100%; height: 100%; min-height: 46vh; border-radius: 12px; }
    /* Modal de histórico da placa */
    .v3-hist-modal { width: min(1000px, 96vw); }
    .v3-hist-periodo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 16px 4px; }
    .v3-hist-periodo-l { font-size: 12.5px; font-weight: 700; color: #94a3b8; margin-right: 6px; }
    .v3-hist-radio { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(148,163,184,.3); font-size: 12.5px; cursor: pointer; color: #cbd5e1; }
    .v3-hist-radio input { accent-color: #2563eb; margin: 0; }
    .v3-hist-radio.on { background: #2563eb; border-color: #2563eb; color: #fff; }
    html.light .v3-hist-radio { color: #475569; border-color: #cbd5e1; }
    html.light .v3-hist-radio.on { background: #2563eb; border-color: #2563eb; color: #fff; }
    .v3-hist-body { min-height: 300px; max-height: 56vh; overflow: auto; padding: 8px 16px; }
    .v3-hist-table { width: 100%; border-collapse: collapse; font-size: 11px; }
    .v3-hist-table th { position: sticky; top: 0; background: #1e293b; color: #e2e8f0; text-align: left; padding: 7px 9px; font-weight: 700; font-size: 10.5px; white-space: nowrap; z-index: 1; vertical-align: top; }
    html.light .v3-hist-table th { background: #f1f5f9; color: #0f172a; }
    .v3-hist-th-row { display: flex; align-items: center; gap: 6px; }
    .v3-hist-th-row > span { flex: 1 1 auto; }
    .v3-hist-fbtn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(148,163,184,.35); background: transparent; color: #94a3b8; cursor: pointer; }
    .v3-hist-fbtn:hover { color: #e2e8f0; border-color: rgba(148,163,184,.6); }
    .v3-hist-fbtn.on { background: #2563eb; border-color: #2563eb; color: #fff; }
    .v3-hist-fov { position: fixed; inset: 0; z-index: 40; }
    .v3-hist-fpop { position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 41; }
    .v3-hist-empty { text-align: center; color: #94a3b8; padding: 16px; }
    /* Barra de filtros ativos (chips) */
    .v3-hist-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 16px 8px; }
    .v3-hist-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px 4px 9px; border-radius: 8px; background: rgba(37,99,235,.12); border: 1px solid rgba(37,99,235,.35); font-size: 11.5px; color: #cbd5e1; }
    html.light .v3-hist-chip { background: #eff6ff; border-color: #bfdbfe; color: #334155; }
    .v3-hist-chip-ok { display: inline-flex; color: #22c55e; }
    .v3-hist-chip-tx { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .v3-hist-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; border-radius: 5px; background: transparent; color: #ef4444; cursor: pointer; }
    .v3-hist-chip-x:hover { background: rgba(239,68,68,.15); }
    .v3-hist-fbar-clear { padding: 4px 10px; font-size: 11.5px; font-weight: 600; border-radius: 8px; border: 1px solid rgba(148,163,184,.35); background: transparent; color: #94a3b8; cursor: pointer; }
    .v3-hist-fbar-clear:hover { color: #e2e8f0; border-color: rgba(148,163,184,.6); }
    html.light .v3-hist-fbar-clear { color: #475569; border-color: #cbd5e1; }
    .v3-hist-table td { padding: 5px 9px; border-top: 1px solid rgba(148,163,184,.15); color: #cbd5e1; vertical-align: middle; }
    html.light .v3-hist-table td { color: #334155; }
    .v3-hist-table tr:hover td { background: rgba(148,163,184,.08); }
    /* Pill da coluna Situação */
    .v3-hist-st { display: inline-block; width: 100%; text-align: center; padding: 4px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; color: #fff; }
    /* Cards de resumo por status */
    .v3-hist-cards { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 16px 10px; }
    .v3-hist-card { flex: 1 1 120px; min-width: 116px; border-radius: 10px; padding: 8px 12px; color: #fff; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.16); }
    .v3-hist-card-n { font-size: 20px; font-weight: 800; line-height: 1; }
    .v3-hist-card-l { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; opacity: .95; }
    /* Palette de situação — mesmas cores do relatório de Irregularidades */
    .v3-st-green  { background: #16a34a; color: #fff; }
    .v3-st-red    { background: #dc2626; color: #fff; }
    .v3-st-blue   { background: #2563eb; color: #fff; }
    .v3-st-orange { background: #ea580c; color: #fff; }
    .v3-st-purple { background: #7c3aed; color: #fff; }
    .v3-st-gold   { background: #ca8a04; color: #fff; }
    .v3-st-pink   { background: #db2777; color: #fff; }
    .v3-st-slate  { background: #475569; color: #fff; }
    .v3-hist-foot { padding: 10px 16px; border-top: 1px solid rgba(148,163,184,.18); font-size: 12.5px; font-weight: 700; color: #94a3b8; text-align: right; }
    .v3-vp-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .v3-vp-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
    .v3-vp-video { max-width: 100%; max-height: 100%; object-fit: contain; background: #000; border-radius: 6px; }
    .v3-vp-badge { position: absolute; right: 12px; top: 12px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; padding: 3px 9px; border-radius: 6px; }
    .v3-vp-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin: 8px; background: #0f172a; border: 1px solid rgba(148,163,184,.18); border-radius: 12px; }
    html.light .v3-vp-bar { background: #f1f5f9; border-color: #e2e8f0; }
    .v3-vp-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: none; cursor: pointer; flex: 0 0 auto; transition: background .15s, transform .1s; }
    .v3-vp-btn:active { transform: scale(.94); }
    .v3-vp-play { width: 40px; height: 40px; background: #f97316; color: #fff; box-shadow: 0 3px 10px rgba(249,115,22,.4); }
    .v3-vp-play:hover { background: #ea580c; }
    .v3-vp-play svg { margin-left: 1px; }
    .v3-vp-stopbtn { width: 34px; height: 34px; background: rgba(148,163,184,.18); color: #cbd5e1; }
    .v3-vp-stopbtn:hover { background: rgba(148,163,184,.3); color: #fff; }
    html.light .v3-vp-stopbtn { background: #e2e8f0; color: #475569; }
    .v3-vp-time { font-size: 13px; font-weight: 600; color: #cbd5e1; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
    html.light .v3-vp-time { color: #475569; }
    .v3-vp-range { flex: 1 1 auto; -webkit-appearance: none; appearance: none; height: 5px; border-radius: 3px; background: rgba(148,163,184,.35); cursor: pointer; outline: none; }
    .v3-vp-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #f97316; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; }
    .v3-vp-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #f97316; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; }
    .v3-video-msg, .v3-vp .v3-video-msg { color: #94a3b8; font-size: 13px; padding: 16px; }
    /* Foto panorâmica (olho de peixe) */
    .v3-pano-scroll { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: auto; }
    .v3-pano-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
    /* ═══════════ Tela de Auditoria ═══════════ */
    .aud-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 12px 4px; }
    .aud-f { display: flex; flex-direction: column; gap: 4px; }
    .aud-f label { font-size: 11px; color: #94a3b8; font-weight: 600; }
    .aud-f input, .aud-f select { padding: 6px 8px; font-size: 12.5px; border-radius: 8px; border: 1px solid rgba(148,163,184,.35); background: rgba(255,255,255,.04); color: #e2e8f0; }
    html.light .aud-f input, html.light .aud-f select { background: #fff; color: #0f172a; border-color: #cbd5e1; }
    .aud-f select option { background: #1e293b; color: #e2e8f0; }
    html.light .aud-f select option { background: #fff; color: #0f172a; }
    .aud-body { overflow: auto; max-height: calc(100vh - 240px); border: 1px solid rgba(148,163,184,.15); border-radius: 10px; }
    .aud-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
    .aud-table th { position: sticky; top: 0; background: #1e293b; color: #e2e8f0; text-align: left; padding: 8px 10px; font-weight: 700; white-space: nowrap; z-index: 1; }
    html.light .aud-table th { background: #f1f5f9; color: #0f172a; }
    .aud-table td { padding: 6px 10px; border-top: 1px solid rgba(148,163,184,.12); color: #cbd5e1; vertical-align: top; }
    html.light .aud-table td { color: #334155; }
    .aud-table tr:hover td { background: rgba(148,163,184,.07); }
    .aud-nowrap { white-space: nowrap; }
    .aud-estacao { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .aud-desc { min-width: 320px; max-width: 560px; white-space: normal; word-break: break-word; line-height: 1.35; }
    .aud-pill { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; white-space: nowrap; color: #fff; background: #475569; }
    .aud-pill-login, .aud-pill-acesso, .aud-pill-consulta { background: #2563eb; }
    .aud-pill-logoff { background: #64748b; }
    .aud-pill-inclusao { background: #16a34a; }
    .aud-pill-alteracao { background: #ea580c; }
    .aud-pill-exclusao, .aud-pill-cancelamento, .aud-pill-rejeicao { background: #dc2626; }
    .aud-pill-aprovacao { background: #16a34a; }
    .aud-pill-impressao, .aud-pill-exportacao, .aud-pill-download, .aud-pill-upload { background: #7c3aed; }
    .aud-pill-configuracao { background: #ca8a04; }
    .aud-res { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700; }
    .aud-ok { background: rgba(34,197,94,.18); color: #22c55e; }
    .aud-fail { background: rgba(239,68,68,.18); color: #ef4444; }
    .aud-foot { padding: 10px 4px; font-size: 12px; font-weight: 700; color: #94a3b8; text-align: right; }
    .aud-export { align-self: flex-end; }
    /* Inputs de filtro extra na Auditoria (dentro do rel-flt-field) */
    .rel-flt-inp { border: none; background: transparent; color: inherit; outline: none; width: 100%; font-size: 13px; }
    .rel-flt-inp option { background: #1e293b; color: #e2e8f0; }
    html.light .rel-flt-inp option { background: #fff; color: #0f172a; }
    .aud-export .rel-export-ico { font-size: 9px; font-weight: 800; }
    /* Popup do marcador no mapa (Geolocalização) */
    /* Balão (popup) amigável do marcador */
    .mapboxgl-popup-content { border-radius: 14px; padding: 0; overflow: hidden; box-shadow: 0 12px 36px rgba(0,0,0,.28); border: 1px solid rgba(148,163,184,.25); }
    .mapboxgl-popup-close-button { width: 24px; height: 24px; font-size: 16px; color: #fff; right: 4px; top: 4px; border-radius: 6px; z-index: 2; }
    .mapboxgl-popup-close-button:hover { background: rgba(255,255,255,.2); }
    .v3-mp { width: 218px; font-family: inherit; }
    .v3-mp-hd { display: flex; align-items: center; gap: 7px; padding: 8px 11px; background: linear-gradient(135deg,#2563eb,#1d4ed8); color: #fff; font-size: 11.5px; }
    .v3-mp-hd svg { width: 13px; height: 13px; flex: 0 0 auto; }
    .v3-mp-hd strong { font-weight: 700; letter-spacing: .01em; }
    .v3-mp-body { padding: 9px 11px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
    .v3-mp-row { display: flex; align-items: flex-start; gap: 8px; }
    .v3-mp-ic { color: #2563eb; margin-top: 1px; flex: 0 0 auto; display: inline-flex; }
    .v3-mp-ic svg { width: 12px; height: 12px; }
    .v3-mp-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .v3-mp-l { font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; font-weight: 600; }
    .v3-mp-v { font-size: 11px; font-weight: 600; color: #0f172a; line-height: 1.25; word-break: break-word; }
    /* Painel "papel de AIT" (amarelado) */
    .v3-acc.v3-acc-paper, html.light .v3-acc.v3-acc-paper { background: #f7f1db; border-color: #ded0a3; }
    .v3-acc-paper .v3-acc-hd.on, .v3-acc-paper .v3-acc-hd-ic { color: #4d7c0f; }
    .v3-acc-paper .v3-acc-hd { color: #3f3a24; }
    .v3-acc-paper .v3-acc-chev { color: #8a7d4f; }
    .v3-acc-paper .v3-row, .v3-acc-paper .v3-row-pair { border-top-color: rgba(120,100,40,.18); }
    .v3-acc-paper .v3-row-ic { color: #a08a4a; }
    .v3-acc-paper .v3-row-l, html.light .v3-acc-paper .v3-row-l { color: #6b5f38; }
    .v3-acc-paper .v3-row-v, html.light .v3-acc-paper .v3-row-v { color: #241f0d; }
    /* Geolocalização: preenche o painel; o mapa ocupa o espaço restante */
    .v3-acc-geo.v3-acc-open { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
    .v3-acc-geo.v3-acc-open > .v3-acc-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: visible; }
    .v3-acc-geo .v3-geo-map { flex: 1 1 auto; min-height: 220px; height: auto; }
    .v3-acc { background: rgba(255,255,255,.03); border: 1px solid rgba(148,163,184,.18); border-radius: 12px; overflow: hidden; }
    html.light .v3-acc { background: #fff; border-color: #e2e8f0; }
    .v3-acc-hd { width: 100%; display: flex; align-items: center; gap: 8px; padding: 11px 12px; background: transparent; border: none; color: inherit; cursor: pointer; font-size: 13px; font-weight: 700; }
    .v3-acc-hd.on { color: #22c55e; }
    .v3-acc-hd-ic { display: inline-flex; }
    .v3-acc-hd-tt { flex: 1; text-align: left; }
    .v3-acc-chev { display: inline-flex; transition: transform .18s; color: #94a3b8; }
    .v3-acc-chev.open { transform: rotate(180deg); }
    .v3-acc-body { padding: 4px 12px 12px; }
    .v3-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(148,163,184,.1); }
    .v3-row:first-child { border-top: none; }
    .v3-row-ic { color: #64748b; margin-top: 1px; flex: 0 0 auto; }
    /* Dois campos na mesma linha */
    .v3-row-pair { display: flex; gap: 14px; border-top: 1px solid rgba(148,163,184,.1); }
    .v3-row-pair .v3-row { flex: 1; border-top: none; min-width: 0; }
    .v3-row-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .v3-row-l { font-size: 11px; color: #94a3b8; }
    .v3-row-v { font-size: 13px; font-weight: 600; color: #e2e8f0; word-break: break-word; }
    html.light .v3-row-v { color: #0f172a; }
    .v3-geo-info { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
    .v3-geo-map { width: 100%; height: 220px; border: 0; border-radius: 8px; }
    .v3-geo-copy { margin-top: 8px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; font-size: 12.5px; font-weight: 600; border-radius: 8px; border: 1px solid #c9bd8e; background: #efe7c9; color: #4d4525; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
    .v3-geo-copy:hover { background: #e6dbb4; border-color: #b7a970; }
    .v3-geo-copy svg { flex: 0 0 auto; }
    .v3-empty-txt { color: #64748b; font-size: 12.5px; padding: 6px 0; }
    /* Centro: evidência */
    .v3-center { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
    .v3-sec-lbl { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: #94a3b8; text-transform: uppercase; }
    .v3-evi { flex: 1 1 auto; min-height: 220px; border-radius: 12px; }
    .v3-evi-badges { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 8px; z-index: 3; }
    .v3-evi-badge { display: inline-flex; align-items: center; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; padding: 4px 9px; border-radius: 6px; line-height: 1; }
    .v3-evi-badges .v3-gtipo { line-height: 1; }
    .v3-evi-actions { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; z-index: 2; }
    .v3-evi-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; border: none; background: rgba(0,0,0,.5); color: #fff; cursor: pointer; }
    .v3-evi-btn:hover { background: rgba(0,0,0,.75); }
    .v3-evi-btn.on { color: #fbbf24; }
    .v3-evi-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 8px 12px; background: linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,0)); color: #e2e8f0; font-size: 11px; z-index: 2; }
    .v3-evi-foot span:last-child { white-space: nowrap; }
    .v3-evi-foot { padding-right: 88px; }
    /* Setas de navegação sobre a imagem */
    .v3-evi-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(0,0,0,.5); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4; }
    .v3-evi-nav:hover { background: rgba(0,0,0,.78); }
    .v3-evi-nav-prev { left: 12px; }
    .v3-evi-nav-next { right: 96px; }
    /* Barra vertical de ferramentas (direita da evidência) */
    .v3-evi-vbar { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 5px; z-index: 4; max-height: 94%; overflow-y: auto; }
    .v3-evi-vbar::-webkit-scrollbar { width: 0; }
    .v3-vbtn.on { background: rgba(37,99,235,.75); }
    .v3-vbtn { width: 66px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border: none; border-radius: 9px; background: rgba(0,0,0,.5); color: #fff; cursor: pointer; }
    .v3-vbtn span { font-size: 10.5px; line-height: 1; }
    .v3-vbtn:hover:not(:disabled) { background: rgba(37,99,235,.7); }
    .v3-vbtn:disabled { opacity: .4; cursor: not-allowed; }
    /* Ferramentas */
    .v3-tools { display: flex; gap: 16px; flex-wrap: wrap; background: rgba(255,255,255,.03); border: 1px solid rgba(148,163,184,.18); border-radius: 12px; padding: 10px 14px; }
    html.light .v3-tools { background: #fff; border-color: #e2e8f0; }
    .v3-tools-grp { display: flex; flex-direction: column; gap: 6px; }
    .v3-tools-lbl { font-size: 10.5px; letter-spacing: .05em; color: #94a3b8; text-transform: uppercase; }
    .v3-tools-row { display: flex; gap: 6px; flex-wrap: wrap; }
    .v3-tbtn { display: inline-flex; align-items: center; gap: 6px; min-width: 34px; height: 34px; padding: 0 10px; justify-content: center; border-radius: 8px; border: 1px solid rgba(148,163,184,.28); background: rgba(255,255,255,.04); color: inherit; cursor: pointer; font-size: 13px; }
    .v3-tbtn:hover:not(:disabled) { background: rgba(37,99,235,.12); border-color: #2563EB; }
    .v3-tbtn:disabled { opacity: .4; cursor: not-allowed; }
    .v3-tbtn-lbl { min-width: 52px; font-variant-numeric: tabular-nums; }
    .v3-tbtn.on { background: rgba(37,99,235,.18); border-color: #2563EB; color: #2563EB; }
    /* Modo de foco: oculta laterais e amplia a evidência */
    .v3-body.v3-focus { grid-template-columns: 1fr; }
    .v3-body.v3-focus .v3-side, .v3-body.v3-focus .v3-gallery { display: none; }
    .v3-body.v3-focus .v3-evi { min-height: 0; }
    /* Galeria (direita) */
    .v3-gallery { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
    .v3-gallery-list { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    /* Imagem ocupa a altura do painel flexionado */
    .v3-evi img, .v3-evi .val2-evi-pan img { max-height: 100%; }
    .v3-gitem { display: flex; gap: 8px; align-items: stretch; padding: 6px; border: 2px solid transparent; border-radius: 10px; cursor: pointer; background: rgba(255,255,255,.03); }
    html.light .v3-gitem { background: #fff; }
    .v3-gitem.on { border-color: #22c55e; }
    .v3-gthumb { position: relative; width: 96px; height: 62px; border-radius: 7px; overflow: hidden; background: #0b1220; flex: 0 0 auto; }
    .v3-gthumb img { width: 100%; height: 100%; object-fit: cover; }
    .v3-gthumb-n { position: absolute; left: 4px; top: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 4px; }
    .v3-ginfo { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; flex: 1; padding: 2px 2px 2px 0; }
    .v3-gdate { font-size: 11px; color: #94a3b8; text-align: right; line-height: 1.3; }
    .v3-gtipo { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; letter-spacing: .02em; white-space: nowrap; }
    .v3-gtipo-pda   { background: rgba(37,99,235,.18);  color: #3b82f6; }
    .v3-gtipo-ocr   { background: rgba(168,85,247,.20); color: #a855f7; }
    .v3-gtipo-video { background: rgba(245,158,11,.20); color: #f59e0b; }
    .v3-gtipo-panoramica { background: rgba(245,158,11,.18); color: #f59e0b; }
    .v3-gstar { border: none; background: transparent; color: #64748b; cursor: pointer; padding: 0; }
    .v3-gstar.on { color: #fbbf24; }
    .v3-gall-all { width: 100%; padding: 9px; border-radius: 9px; border: 1px dashed rgba(148,163,184,.35); background: transparent; color: #94a3b8; cursor: pointer; font-size: 12.5px; }
    .v3-gall-all:hover:not(:disabled) { color: #2563EB; border-color: #2563EB; }
    .v3-gall-all:disabled { opacity: .4; cursor: not-allowed; }
    /* Barra inferior */
    /* Barra inferior ancorada na base da tela */
    .v3-bottom { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: #0f1729; border: 1px solid rgba(148,163,184,.22); border-radius: 12px; padding: 12px 16px; z-index: 30; box-shadow: 0 -6px 18px rgba(0,0,0,.28); }
    html.light .v3-bottom { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 -6px 18px rgba(15,23,42,.08); }
    .v3-page { padding-top: 12px; padding-bottom: 6px; }
    .v3-bl { display: flex; align-items: center; gap: 12px; }
    .v3-navbtn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(148,163,184,.3); background: rgba(255,255,255,.04); color: inherit; cursor: pointer; font-size: 18px; }
    .v3-navbtn:disabled { opacity: .4; cursor: not-allowed; }
    .v3-reg { display: flex; flex-direction: column; align-items: center; }
    .v3-reg-l { font-size: 11px; color: #94a3b8; }
    .v3-reg-v { font-size: 14px; font-weight: 700; }
    .v3-bc { display: flex; align-items: center; justify-content: center; gap: 18px; flex: 1; }
    .v3-lote { font-size: 13px; color: #94a3b8; }
    .v3-prog-wrap { display: flex; align-items: center; gap: 8px; }
    .v3-prog-l { font-size: 12px; color: #94a3b8; }
    .v3-prog { width: 320px; max-width: 40vw; height: 8px; background: rgba(148,163,184,.25); border-radius: 999px; overflow: hidden; }
    .v3-prog-bar { display: block; height: 100%; background: #22c55e; transition: width .25s; }
    .v3-prog-pct { font-size: 12px; font-weight: 700; }
    .v3-cnt { display: flex; align-items: center; gap: 18px; }
    .v3-cnt-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #94a3b8; }
    .v3-cnt-item strong { font-size: 15px; }
    .v3-cnt-pend { color: #f59e0b; } .v3-cnt-ace { color: #22c55e; } .v3-cnt-rej { color: #ef4444; }
    .v3-atualizado { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #94a3b8; }
    .v3-actions { margin-left: auto; display: flex; gap: 10px; }
    .v3-abtn { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; padding: 12px 22px; border-radius: 11px; border: none; color: #fff; cursor: pointer; }
    .v3-abtn small { font-weight: 500; opacity: .85; font-size: 11px; }
    .v3-abtn-ok  { background: #16a34a; } .v3-abtn-ok:hover  { background: #15803d; }
    .v3-abtn-rej { background: #dc2626; } .v3-abtn-rej:hover { background: #b91c1c; }