/* ==========================================================================
   MAPS DESIGN FIXES - Correções de Design para Divs Flutuantes
   Framework Genesis - Dark/Game-Like Theme
   ========================================================================== */

/* ==========================================================================
   [FIX 8] CARDS DE PEDIDOS NO PAINEL DE ROTEIRIZAÇÃO
   Design dark/gamificado sem bordas brancas
   ========================================================================== */

.g-card-pedido {
    background: linear-gradient(145deg, rgba(30, 27, 75, 0.95) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-left: 4px solid var(--rota-cor, #8b5cf6);
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.g-card-pedido::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.3), transparent);
}

.g-card-pedido:hover {
    transform: translateX(4px);
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(139, 92, 246, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Card com conflito de entrega - borda vermelha pulsante */
.g-card-pedido.delivery-conflict {
    border-left-color: #ef4444 !important;
    background: linear-gradient(145deg, rgba(127, 29, 29, 0.3) 0%, rgba(15, 23, 42, 0.9) 100%);
    animation: conflict-pulse 2s ease-in-out infinite;
}

@keyframes conflict-pulse {

    0%,
    100% {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(239, 68, 68, 0.2);
    }

    50% {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 25px rgba(239, 68, 68, 0.4);
    }
}

/* Card com warning de horário - borda amarela */
.g-card-pedido.delivery-warning-border {
    border-left-color: #f59e0b !important;
    background: linear-gradient(145deg, rgba(120, 53, 15, 0.2) 0%, rgba(15, 23, 42, 0.9) 100%);
}

/* Status de entrega dentro do card */
.pedido-delivery-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
}

.pedido-delivery-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.1));
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.pedido-delivery-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

.pedido-delivery-ok {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.1));
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

.pedido-delivery-no-window {
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}

/* ==========================================================================
   [FIX 9] BADGE DE TOTAL - VERDE PULSANTE
   Animação forte e visível para o badge de total da rota
   ========================================================================== */

.g-stat-badge.green.pulsante,
.badge-total-pulsante,
.g-badge-valor-total,
.animate-pulse.bg-emerald-900\/60,
[class*="emerald-400"][class*="animate-pulse"] {
    animation: total-badge-pulse-epic 1.5s ease-in-out infinite !important;
    position: relative;
}

/* Animação épica de pulse verde */
@keyframes total-badge-pulse-epic {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.4),
            inset 0 0 10px rgba(16, 185, 129, 0.15);
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        box-shadow: 0 0 30px rgba(16, 185, 129, 0.7),
            0 0 50px rgba(16, 185, 129, 0.4),
            inset 0 0 15px rgba(16, 185, 129, 0.25);
        transform: scale(1.03);
        filter: brightness(1.15);
    }
}

/* ==========================================================================
   [FIX 12] FLUXO DA ROTA - POSICIONAMENTO ESQUERDO E DESIGN FRAMEWORK
   ========================================================================== */

#rota-flow-panel {
    position: fixed !important;
    left: 20px !important;
    right: auto !important;
    top: 100px !important;
    bottom: 20px !important;
    width: 380px !important;
    z-index: 9999;

    /* Design Framework */
    background: linear-gradient(145deg, rgba(15, 12, 41, 0.98) 0%, rgba(26, 20, 53, 0.95) 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    border-radius: 16px !important;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(139, 92, 246, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(12px);
    overflow: hidden;
}

/* Header do Fluxo da Rota */
#rota-flow-panel .flow-header,
#rota-flow-panel>div:first-child {
    background: linear-gradient(135deg, #1e1b4b 0%, #0f0c29 100%) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2) !important;
    padding: 1rem 1.25rem;
}

#rota-flow-panel .flow-header::after,
#rota-flow-panel>div:first-child::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.5), transparent);
}

/* Cards dentro do Fluxo */
#rota-flow-panel .step-card,
#rota-flow-panel .flow-step {
    background: linear-gradient(145deg, rgba(30, 27, 75, 0.6) 0%, rgba(15, 23, 42, 0.4) 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    border-radius: 12px !important;
    transition: all 0.3s;
}

#rota-flow-panel .step-card:hover,
#rota-flow-panel .flow-step:hover {
    border-color: rgba(139, 92, 246, 0.4) !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.2) !important;
}

/* Footer do Fluxo */
#rota-flow-panel .flow-footer,
#rota-flow-panel>div:last-child {
    background: linear-gradient(to top, rgba(15, 12, 41, 1) 50%, transparent) !important;
    border-top: 1px solid rgba(139, 92, 246, 0.1) !important;
    padding: 1rem 1.25rem;
}

/* ==========================================================================
   [FIX 13] DIV DE INFORMAÇÕES DO PEDIDO (MARKER INFO)
   Design dark/gamificado sem bordas brancas
   ========================================================================== */

#marker-info,
.marker-info-panel,
.g-info-pedido {
    background: linear-gradient(145deg, rgba(15, 12, 41, 0.98) 0%, rgba(26, 20, 53, 0.95) 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    border-radius: 16px !important;
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(139, 92, 246, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    color: white !important;
    overflow: hidden;
}

/* Remove qualquer borda branca residual */
#marker-info *,
.marker-info-panel * {
    border-color: rgba(139, 92, 246, 0.2) !important;
}

/* Header do Info Pedido */
#marker-info .info-header,
#marker-info>div:first-child {
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.8) 0%, rgba(15, 23, 42, 0.6) 100%) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2) !important;
}

/* Container de imagem/streetview */
#info-image-container,
#info-streetview-mini {
    background: linear-gradient(145deg, rgba(30, 27, 75, 0.5), rgba(15, 23, 42, 0.3)) !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    border-radius: 12px !important;
}

/* Placeholder de imagem */
#info-image-placeholder {
    background: linear-gradient(145deg, rgba(30, 27, 75, 0.6), rgba(15, 23, 42, 0.4)) !important;
    border: 1px dashed rgba(139, 92, 246, 0.3) !important;
    color: rgba(168, 85, 247, 0.6) !important;
}

/* Janela de entrega - Design Dark */
.janela-entrega-container {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(79, 70, 229, 0.1) 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
    border-radius: 12px !important;
}

.janela-entrega-container h4 {
    color: #a5b4fc !important;
}

.janela-entrega-container .flex {
    background: rgba(30, 27, 75, 0.4) !important;
    border-radius: 8px !important;
}

.janela-entrega-container span {
    color: #e0e7ff !important;
}

/* Botões de ação no info do pedido */
#marker-info-action-buttons button,
#marker-info .action-btn {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.15)) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    color: #c4b5fd !important;
    border-radius: 10px !important;
    transition: all 0.3s !important;
}

#marker-info-action-buttons button:hover,
#marker-info .action-btn:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(99, 102, 241, 0.25)) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.25) !important;
}

/* Container de anotações */
#info-annotations-container {
    background: rgba(30, 27, 75, 0.3) !important;
    border-radius: 10px !important;
    padding: 0.75rem !important;
}

#info-annotations-container h4 {
    color: #a78bfa !important;
}

/* Badges de anotação */
.badge-pedido,
.badge-cliente {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.1)) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
    color: #93c5fd !important;
}

.badge-cliente {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(234, 88, 12, 0.1)) !important;
    border-color: rgba(249, 115, 22, 0.25) !important;
    color: #fdba74 !important;
}

/* ==========================================================================
   ALERTAS DE ENTREGA NO PAINEL
   ========================================================================== */

.delivery-alerts-summary {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.delivery-time-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.delivery-time-alert .alert-icon {
    font-size: 1rem;
}

.delivery-time-alert .alert-count {
    font-weight: 700;
    font-size: 1rem;
}

.delivery-time-alert-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.1));
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.delivery-time-alert-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

.delivery-time-alert-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.1));
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

/* ==========================================================================
   ANIMAÇÃO DE ENTRADA PARA O FLUXO DA ROTA
   ========================================================================== */

@keyframes fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-left {
    animation: fade-in-left 0.4s ease-out forwards;
}

/* ==========================================================================
   PLACEHOLDER SORTABLE - DESIGN DARK
   ========================================================================== */

.sortable-placeholder {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.05)) !important;
    border: 2px dashed rgba(139, 92, 246, 0.4) !important;
    border-radius: 12px !important;
    height: 80px;
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   [FIX 2] BARRA DE OCUPAÇÃO ÉPICA DO VEÍCULO
   Design gamificado com animações e efeitos visuais
   ========================================================================== */

.g-ocupacao-container {
    margin-top: 1rem;
    padding: 1rem;
    background: linear-gradient(145deg, rgba(30, 27, 75, 0.6) 0%, rgba(15, 23, 42, 0.4) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.g-ocupacao-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            transparent,
            rgba(var(--glow-color), 0.5),
            transparent);
}

/* Header */
.g-ocupacao-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.g-ocupacao-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
}

.g-ocupacao-label i {
    color: rgba(var(--glow-color), 1);
}

.g-ocupacao-status {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
}

.ocupacao-normal .g-ocupacao-status {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.1));
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

.ocupacao-atencao .g-ocupacao-status {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.ocupacao-alerta .g-ocupacao-status {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

.ocupacao-critica .g-ocupacao-status {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.1));
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
    animation: status-pulse 1s ease-in-out infinite;
}

@keyframes status-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Valor Principal */
.g-ocupacao-valor {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin: 0.5rem 0;
}

.g-ocupacao-valor .valor-numero {
    font-size: 2.5rem;
    font-weight: 900;
    color: white;
    text-shadow: 0 0 20px rgba(var(--glow-color), 0.5);
    line-height: 1;
}

.g-ocupacao-valor .valor-simbolo {
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(var(--glow-color), 1);
}

/* Container da Barra */
.g-ocupacao-barra-container {
    margin: 1rem 0;
}

.g-ocupacao-barra-fundo {
    position: relative;
    height: 20px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.6) 100%);
    border-radius: 10px;
    border: 1px solid rgba(100, 116, 139, 0.3);
    overflow: visible;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Marcadores */
.g-ocupacao-marcadores {
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    height: 16px;
    pointer-events: none;
}

.g-ocupacao-marcadores .marcador {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.g-ocupacao-marcadores .marcador::after {
    content: '';
    width: 1px;
    height: 6px;
    background: rgba(100, 116, 139, 0.5);
    margin-top: 2px;
}

.g-ocupacao-marcadores .marcador span {
    font-size: 0.5rem;
    color: #64748b;
    font-weight: 600;
}

.g-ocupacao-marcadores .marcador-limite span {
    color: #ef4444;
}

.g-ocupacao-marcadores .marcador-limite::after {
    background: rgba(239, 68, 68, 0.5);
}

/* Barra de Preenchimento */
.g-ocupacao-barra-fill {
    position: absolute;
    top: 2px;
    left: 2px;
    height: calc(100% - 4px);
    border-radius: 8px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 15px rgba(var(--glow-color), 0.4);
    overflow: hidden;
}

/* Shimmer Effect */
.g-ocupacao-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    animation: shimmer-move 2s infinite;
}

@keyframes shimmer-move {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Ponta da Barra */
.g-ocupacao-barra-ponta {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: white;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Excesso */
.g-ocupacao-excesso {
    position: absolute;
    right: 0;
    top: 2px;
    height: calc(100% - 4px);
    background: repeating-linear-gradient(-45deg,
            rgba(239, 68, 68, 0.3),
            rgba(239, 68, 68, 0.3) 4px,
            rgba(239, 68, 68, 0.1) 4px,
            rgba(239, 68, 68, 0.1) 8px);
    border-radius: 0 8px 8px 0;
    animation: excesso-pulse 1s ease-in-out infinite;
}

@keyframes excesso-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Info de Cubagem */
.g-ocupacao-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(139, 92, 246, 0.15);
}

.g-ocupacao-info .info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

.g-ocupacao-info .info-label {
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.g-ocupacao-info .info-valor {
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
    font-family: monospace;
}

.g-ocupacao-info .info-divider {
    color: rgba(139, 92, 246, 0.4);
    font-size: 0.75rem;
}

/* ==========================================================================
   [FIX 3] ROUTE CONTROL PANEL - PAINEL DE ROTEIRIZAÇÃO
   Design gamificado, sem bordas brancas, shadows épicas
   ========================================================================== */

#route-control-panel {
    background: linear-gradient(145deg, rgba(15, 12, 41, 0.98) 0%, rgba(26, 20, 53, 0.95) 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    border-top: 4px solid var(--rota-cor, #8b5cf6) !important;
    border-radius: 16px !important;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(139, 92, 246, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(12px);
    overflow: hidden;
}

/* Remover bordas brancas */
#route-control-panel,
#route-control-panel * {
    border-color: rgba(139, 92, 246, 0.2) !important;
}

/* Header do Painel */
#route-control-panel .panel-header,
#route-control-panel>div:first-child {
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.6) 0%, rgba(15, 23, 42, 0.4) 100%) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2) !important;
    padding: 1rem !important;
}

/* Nome da Rota no Header */
#panel-route-name {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: white !important;
    text-shadow: 0 0 10px currentColor !important;
}

/* Contagem de Pedidos */
#panel-order-count {
    font-size: 0.75rem !important;
    color: #a78bfa !important;
    font-weight: 500 !important;
}

/* Ícones do Painel - usar cor do framework, não da rota */
#route-control-panel .panel-icon,
#route-control-panel .iconePainelRota,
#route-control-panel i:not(.fas):not(.far):not(.fab) {
    color: #a78bfa !important;
}

/* Seções dentro do painel */
#route-control-panel section,
#route-control-panel .panel-section {
    background: rgba(30, 27, 75, 0.3) !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    border-radius: 12px !important;
    margin: 0.5rem !important;
    padding: 0.75rem !important;
}

/* Seção de Configuração */
#panel-config-section {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.05)) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    border-radius: 12px !important;
    cursor: pointer;
    transition: all 0.3s;
}

#panel-config-section:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.1)) !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.2) !important;
}

/* Textos do Painel */
#route-control-panel .font-medium,
#route-control-panel span {
    color: #e2e8f0 !important;
}

#route-control-panel .text-gray-500,
#route-control-panel .text-gray-400 {
    color: #94a3b8 !important;
}

/* Consolidado (Distância, Tempo, Custo) */
#panel-consolidado {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(30, 27, 75, 0.4) !important;
    border-radius: 10px !important;
}

#panel-consolidado>div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.08)) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    border-radius: 8px !important;
}

#panel-consolidado .panel-icon {
    font-size: 0.875rem;
    color: #a78bfa !important;
}

#panel-consolidado .font-medium {
    font-size: 0.875rem;
    font-weight: 600;
    color: white !important;
}

/* Botões do Painel */
#route-control-panel button {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.15)) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    color: #c4b5fd !important;
    border-radius: 10px !important;
    transition: all 0.3s !important;
    font-weight: 600 !important;
}

#route-control-panel button:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(99, 102, 241, 0.25)) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.25) !important;
}

/* Botão Confirmar Rota - Destaque especial */
#btn-confirmar-rota {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.2)) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    color: #6ee7b7 !important;
}

#btn-confirmar-rota:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.5), rgba(5, 150, 105, 0.35)) !important;
    border-color: rgba(16, 185, 129, 0.6) !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3) !important;
}

/* Lista de Pedidos */
#panel-pedidos-list {
    background: transparent !important;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}

#panel-pedidos-list::-webkit-scrollbar {
    width: 6px;
}

#panel-pedidos-list::-webkit-scrollbar-track {
    background: transparent;
}

#panel-pedidos-list::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 3px;
}

/* Divisores */
#route-control-panel hr {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.3), transparent) !important;
    margin: 0.75rem 0 !important;
}

/* ==========================================================================
   [FIX 5] INFO-ORDER-DATE - DETALHES EM VERDE
   ========================================================================== */

.info-order-date,
#info-order-date,
[id*="info-order-date"],
.info-order-date-value {
    color: #6ee7b7 !important;
    font-weight: 600;
}

.info-order-date i,
#info-order-date i,
.info-order-date-icon {
    color: #10b981 !important;
    filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.4));
}

.info-order-date-label {
    color: #34d399 !important;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Container de data do pedido - estilo épico */
.g-info-data-pedido {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.08)) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    border-radius: 10px;
    margin-top: 0.5rem;
}

.g-info-data-pedido i {
    color: #10b981;
    font-size: 0.875rem;
}

.g-info-data-pedido span {
    color: #6ee7b7 !important;
    font-weight: 500;
    font-size: 0.8125rem;
}

/* ==========================================================================
   [FIX 3 APRIMORADO] ROUTE CONTROL PANEL - DESIGN GAMEFICADO AVANÇADO
   ========================================================================== */

/* Container principal com efeitos épicos */
#route-control-panel {
    background: linear-gradient(165deg,
            rgba(15, 12, 41, 0.98) 0%,
            rgba(26, 20, 53, 0.95) 50%,
            rgba(15, 12, 41, 0.98) 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    border-top: 3px solid var(--rota-cor, #8b5cf6) !important;
    border-radius: 16px !important;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.7),
        0 0 50px rgba(139, 92, 246, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(16px);
    overflow: hidden;
    position: relative;
}

/* Barra de energia no topo */
#route-control-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            transparent,
            var(--rota-cor, #8b5cf6),
            rgba(168, 85, 247, 0.8),
            var(--rota-cor, #8b5cf6),
            transparent);
    animation: panel-energy-flow 3s linear infinite;
}

@keyframes panel-energy-flow {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* Partículas flutuantes no fundo */
#route-control-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(139, 92, 246, 0.3), transparent),
        radial-gradient(1px 1px at 80% 60%, rgba(168, 85, 247, 0.2), transparent),
        radial-gradient(1px 1px at 40% 80%, rgba(139, 92, 246, 0.15), transparent);
    pointer-events: none;
    opacity: 0.5;
}

/* Cards de pedidos dentro do painel - design futurista */
#route-control-panel .g-card-pedido,
#route-control-panel .pedido-card,
#route-control-panel [id^="panel-pedido-"] {
    background: linear-gradient(145deg,
            rgba(30, 27, 75, 0.7) 0%,
            rgba(15, 23, 42, 0.5) 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    border-left: 3px solid rgba(139, 92, 246, 0.5) !important;
    border-radius: 12px !important;
    padding: 0.875rem !important;
    margin-bottom: 0.625rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#route-control-panel .g-card-pedido::before,
#route-control-panel .pedido-card::before,
#route-control-panel [id^="panel-pedido-"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(139, 92, 246, 0.3),
            transparent);
}

#route-control-panel .g-card-pedido:hover,
#route-control-panel .pedido-card:hover,
#route-control-panel [id^="panel-pedido-"]:hover {
    background: linear-gradient(145deg,
            rgba(40, 37, 85, 0.8) 0%,
            rgba(25, 33, 52, 0.6) 100%) !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
    transform: translateX(4px);
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(139, 92, 246, 0.15) !important;
}

/* Textos dos cards - sem cor da rota, usar cores neutras */
#route-control-panel .g-card-pedido span,
#route-control-panel .pedido-card span,
#route-control-panel [id^="panel-pedido-"] span {
    color: #e2e8f0 !important;
}

#route-control-panel .g-card-pedido .text-xs,
#route-control-panel .pedido-card .text-xs,
#route-control-panel [id^="panel-pedido-"] .text-xs {
    color: #94a3b8 !important;
}

/* Badges dentro dos cards */
#route-control-panel .g-card-pedido .badge,
#route-control-panel .pedido-card .badge {
    background: rgba(139, 92, 246, 0.15) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    color: #c4b5fd !important;
}

/* Seção de configuração com destaque épico */
#panel-config-section {
    background: linear-gradient(145deg,
            rgba(139, 92, 246, 0.12) 0%,
            rgba(99, 102, 241, 0.06) 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    border-radius: 14px !important;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#panel-config-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg,
            transparent,
            rgba(139, 92, 246, 0.1),
            transparent 30%);
    animation: config-rotate 6s linear infinite;
    opacity: 0;
    transition: opacity 0.3s;
}

#panel-config-section:hover::before {
    opacity: 1;
}

@keyframes config-rotate {
    100% {
        transform: rotate(360deg);
    }
}

#panel-config-section:hover {
    background: linear-gradient(145deg,
            rgba(139, 92, 246, 0.2) 0%,
            rgba(99, 102, 241, 0.12) 100%) !important;
    border-color: rgba(139, 92, 246, 0.45) !important;
    box-shadow:
        0 0 30px rgba(139, 92, 246, 0.2),
        inset 0 0 15px rgba(139, 92, 246, 0.05) !important;
    transform: scale(1.01);
}

/* ==========================================================================
   [FIX 4] G-ROTA-BTN - LAYOUT SPACE-BETWEEN E HOVER OTIMIZADO
   ========================================================================== */

/* Override para melhor layout com space-between */
.g-rota-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    width: 100%;
    padding: 0.625rem 0.875rem !important;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 0.625rem !important;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--g-texto-primario);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: left;
    margin-bottom: 0.375rem;
    /* Transição suavizada para evitar lag */
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    /* Desativar transformações pesadas */
    transform: none !important;
    will-change: border-color, box-shadow;
}

/* Container da esquerda (ID + Nome) */
.g-rota-btn .rota-info-left {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 1;
    min-width: 0;
}

/* Container da direita (Status/Disponível) */
.g-rota-btn .rota-info-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Nome da rota com truncate */
.g-rota-btn .rota-nome {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f1f5f9 !important;
}

/* Desativar animação de shimmer no hover para performance */
.g-rota-btn::before {
    display: none !important;
}

/* Hover LEVE sem transformações pesadas */
.g-rota-btn:hover {
    border-color: rgba(139, 92, 246, 0.45) !important;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.15) !important;
    /* SEM transform para evitar lag */
    transform: none !important;
}

/* Estado focado/selecionado */
.g-rota-btn.item-focused {
    background: rgba(139, 92, 246, 0.15) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.25) !important;
}

/* Badge de status (Em uso / Disponível) */
.g-rota-btn .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.g-rota-btn .status-badge.em-uso {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

.g-rota-btn .status-badge.disponivel {
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(100, 116, 139, 0.25);
    color: #94a3b8;
}

/* Indicador de cubagem pequeno */
.g-rota-btn .rota-cubagem {
    font-size: 0.6875rem;
    color: #64748b;
    opacity: 0.9;
}

/* ==========================================================================
   [FIX 1] DIV DE DADOS DA ROTA - BADGE VERDE E NOME CONTRASTANTE
   ========================================================================== */

/* Badge de Total com fundo verde (não só pulsando) */
.g-badge-valor-total {
    background: linear-gradient(135deg,
            rgba(16, 185, 129, 0.5) 0%,
            rgba(5, 150, 105, 0.35) 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    box-shadow:
        0 0 30px rgba(16, 185, 129, 0.45),
        inset 0 0 20px rgba(16, 185, 129, 0.15) !important;
    text-shadow: 0 0 15px rgba(16, 185, 129, 0.6);
    animation: total-badge-pulse-epic 1.5s ease-in-out infinite;
}

/* Badge de estatística verde aprimorado */
.g-badge-stat.green {
    background: linear-gradient(135deg,
            rgba(16, 185, 129, 0.35) 0%,
            rgba(5, 150, 105, 0.2) 100%) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.25);
}

/* Estilos aprimorados para g-badge-stat */
.g-badge-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.g-badge-stat i {
    font-size: 0.6875rem;
}

.g-badge-stat.purple {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(168, 85, 247, 0.15)) !important;
    color: #c4b5fd !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
}

.g-badge-stat.blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(99, 102, 241, 0.15)) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(59, 130, 246, 0.35) !important;
}

.g-badge-stat.orange {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.15)) !important;
    color: #fdba74 !important;
    border: 1px solid rgba(249, 115, 22, 0.35) !important;
}

/* ==========================================================================
   [FIX 2 COMPLEMENTAR] OCUPAÇÃO DO VEÍCULO - MELHORIAS ADICIONAIS
   ========================================================================== */

/* Container com borda épica animada */
.g-ocupacao-container {
    position: relative;
    margin-top: 1rem;
    padding: 1.25rem;
    background: linear-gradient(165deg,
            rgba(30, 27, 75, 0.7) 0%,
            rgba(15, 23, 42, 0.5) 100%);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 18px;
    overflow: hidden;
}

/* Borda animada épica */
.g-ocupacao-container::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
            rgba(var(--glow-color), 0.4),
            transparent 40%,
            transparent 60%,
            rgba(var(--glow-color), 0.4));
    border-radius: 20px;
    z-index: -1;
    animation: border-glow 4s linear infinite;
}

@keyframes border-glow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Partículas na barra de ocupação */
.g-ocupacao-barra-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 60% 30%, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.25) 1px, transparent 1px);
    animation: particles-float 3s linear infinite;
}

@keyframes particles-float {
    0% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(10px);
    }
}