/**
 * ═══════════════════════════════════════════════════════════════════════════
 * 🎨 POI CSS - Estilos para Sistema de Pontos de Interesse
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * @version 2.1.0
 * @date Janeiro 2026
 * @phase Fase 11 - Item 186
 *
 * 🆕 v2.1.0 (BUG #015):
 * - Estilos para marcadores de alertsData (pedágio, curva, descida)
 * - Cores específicas para novos tipos de alerta
 *
 * COMPONENTES:
 * - Marcadores de POI no mapa
 * - Popups com informações
 * - Painel de filtros
 * - Animações e estados
 * - Suporte tema escuro
 */

/* ═══════════════════════════════════════════════════════════════════════════
   VARIÁVEIS CSS
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Cores por tipo de POI */
    --poi-radar-color: #dc2626;
    --poi-balanca-color: #3b82f6;
    --poi-posto-color: #22c55e;
    --poi-restaurante-color: #f59e0b;
    --poi-borracharia-color: #6b7280;
    --poi-pernoite-color: #a855f7;
    --poi-restricao-color: #ef4444;
    --poi-pista-color: #eab308;
    
    /* Cores gerais */
    --poi-popup-bg: #ffffff;
    --poi-popup-text: #1f2937;
    --poi-popup-text-secondary: #6b7280;
    --poi-popup-border: #e5e7eb;
    --poi-popup-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    
    /* Tamanhos */
    /* 🔧 v11.2.172 (Foco 3): 32px -> 24px — marcadores estavam grandes/feios na pista. */
    /* 🆕 v11.2.195 (trips 8667/4049 — "o POI e muito, muito grande"):
       ATENCAO — este px NAO e o tamanho na tela. Durante a navegacao o mapa inteiro
       (#map) roda com `scale(MAP_SCALE)` para o heading-up, MAP_SCALE = √(1+ar²)×1.05
       ≈ 2.37 em tela de celular (mapFollowController.js). Os CONTROLES recebem
       contra-escala 1/MAP_SCALE; os markers do Leaflet NAO — eles vivem dentro do
       container escalado. Entao 24px aqui = ~57px reais na pista, e como o
       FOLLOW_ZOOM foi baixado 18->17 justamente para compensar o zoom do scale, o
       marcador fica 2,37x maior EM RELACAO A RUA do que aparenta na pre-visualizacao.
       Foi por isso que o corte 32->24 da v172 nao resolveu: 76px -> 57px.

       --poi-size-factor e o unico botao: marcador, icone e anel de pulso derivam dele,
       entao o pulso continua proporcional em qualquer tamanho. Trocado em runtime pelo
       seletor de 5 tamanhos no modal de Alertas (bottomNavigation.js). */
    --poi-size-factor: 0.67;                  /* padrao: Medio */
    /* BASES por breakpoint (o mobile tem base maior — alvo de toque). O fator multiplica
       a base, entao fator 1.00 reproduz EXATAMENTE o tamanho de ate a v11.2.194 em
       qualquer tela, e os outros 4 presets sao proporcoes dele. */
    --poi-marker-base: 24px;
    --poi-icon-base: 12px;
    --poi-ring-base: 50px;

    --poi-marker-size: calc(var(--poi-marker-base) * var(--poi-size-factor));
    /* icone acompanha o marcador; o max() impede que vire um ponto ilegivel no
       "Minusculo" — abaixo de 7px o emoji nao resolve mais forma nenhuma. */
    --poi-marker-icon-size: max(7px, calc(var(--poi-icon-base) * var(--poi-size-factor)));
    --poi-ring-size: calc(var(--poi-ring-base) * var(--poi-size-factor));
    --poi-popup-width: 300px;
    --poi-popup-radius: 12px;
}

/* Tema escuro */
[data-theme="dark"],
.dark-mode {
    --poi-popup-bg: #1f2937;
    --poi-popup-text: #f9fafb;
    --poi-popup-text-secondary: #9ca3af;
    --poi-popup-border: #374151;
    --poi-popup-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARCADORES DE POI
   ═══════════════════════════════════════════════════════════════════════════ */

.poi-marker {
    background: transparent !important;
    border: none !important;
}

.poi-marker-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--poi-marker-size);
    height: var(--poi-marker-size);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.poi-marker-container:hover {
    transform: rotate(-45deg) scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.poi-marker-icon {
    transform: rotate(45deg);
    /* 🔧 v11.2.172 (Foco 3): 16px -> 12px, acompanha o marcador menor. */
    /* 🆕 v11.2.195: deriva de --poi-size-factor junto com o marcador. */
    font-size: var(--poi-marker-icon-size);
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

/* Marcadores por tipo */
.poi-marker-radar .poi-marker-container { background-color: var(--poi-radar-color); }
.poi-marker-balanca .poi-marker-container { background-color: var(--poi-balanca-color); }
.poi-marker-posto .poi-marker-container { background-color: var(--poi-posto-color); }
.poi-marker-restaurante .poi-marker-container { background-color: var(--poi-restaurante-color); }
.poi-marker-borracharia .poi-marker-container { background-color: var(--poi-borracharia-color); }
.poi-marker-pernoite .poi-marker-container { background-color: var(--poi-pernoite-color); }
.poi-marker-restricao .poi-marker-container { background-color: var(--poi-restricao-color); }
.poi-marker-pista_escape .poi-marker-container { background-color: var(--poi-pista-color); }

/* 🆕 v2.1.0: Tipos de alertsData (BUG #015) */
.poi-marker-pedagio .poi-marker-container { background-color: #f59e0b; } /* Laranja */
.poi-marker-curva .poi-marker-container { background-color: #ef4444; }   /* Vermelho */
.poi-marker-descida .poi-marker-container { background-color: #8b5cf6; } /* Roxo */
.poi-marker-parada .poi-marker-container { background-color: #a855f7; }  /* Roxo claro */
.poi-marker-pista_escape .poi-marker-container { background-color: #eab308; } /* Amarelo */

/* ═══════════════════════════════════════════════════════════════════════════
   MARCADOR DESTACADO (ANIMAÇÃO)
   ═══════════════════════════════════════════════════════════════════════════ */

.poi-marker-destacado .poi-marker-container {
    animation: poi-pulse 1s ease-in-out infinite;
}

@keyframes poi-pulse {
    0%, 100% {
        transform: rotate(-45deg) scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    50% {
        transform: rotate(-45deg) scale(1.3);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    }
}

/* Anel de pulso externo */
/* 🆕 v11.2.195: o anel era 50px FIXO. Com o marcador encolhendo pelo fator, um anel
   fixo viraria um disco solto em volta de um ponto — o pulso precisa escalar junto
   para continuar lendo como "este POI aqui". A ANIMACAO (poi-pulse/poi-ring) segue
   intacta: so o raio muda, a cadencia e o easing sao os mesmos. */
.poi-marker-destacado::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--poi-ring-size);
    height: var(--poi-ring-size);
    margin-top: calc(var(--poi-ring-size) / -2);
    margin-left: calc(var(--poi-ring-size) / -2);
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.3);
    animation: poi-ring 1.5s ease-out infinite;
}

@keyframes poi-ring {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POPUP DE POI
   ═══════════════════════════════════════════════════════════════════════════ */

.leaflet-popup.poi-popup {
    margin-bottom: 20px;
}

.leaflet-popup.poi-popup .leaflet-popup-content-wrapper {
    background: var(--poi-popup-bg);
    color: var(--poi-popup-text);
    border-radius: var(--poi-popup-radius);
    box-shadow: var(--poi-popup-shadow);
    padding: 0;
    overflow: hidden;
}

.leaflet-popup.poi-popup .leaflet-popup-content {
    margin: 0;
    width: var(--poi-popup-width) !important;
}

.leaflet-popup.poi-popup .leaflet-popup-tip {
    background: var(--poi-popup-bg);
}

.leaflet-popup.poi-popup .leaflet-popup-close-button {
    color: var(--poi-popup-text-secondary);
    font-size: 20px;
    width: 28px;
    height: 28px;
    top: 8px;
    right: 8px;
    z-index: var(--z-popup);
}

.leaflet-popup.poi-popup .leaflet-popup-close-button:hover {
    color: var(--poi-popup-text);
}

/* Container do popup */
.poi-popup-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Header do popup */
.poi-popup-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--poi-popup-border);
}

.poi-popup-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

.poi-popup-title-wrapper {
    flex: 1;
    min-width: 0;
}

.poi-popup-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--poi-popup-text);
    line-height: 1.3;
    word-wrap: break-word;
}

.poi-popup-type {
    display: inline-block;
    font-size: 12px;
    color: var(--poi-popup-text-secondary);
    margin-top: 2px;
}

.poi-popup-distance {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--poi-balanca-color);
    background: rgba(59, 130, 246, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
}

/* Body do popup */
.poi-popup-body {
    padding: 12px 16px;
}

.poi-popup-info {
    font-size: 13px;
    color: var(--poi-popup-text-secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.poi-popup-info:last-child {
    margin-bottom: 0;
}

.poi-popup-brand {
    font-size: 14px;
    font-weight: 500;
    color: var(--poi-popup-text);
    margin-bottom: 8px;
}

.poi-popup-speed {
    font-size: 15px;
    font-weight: 600;
    color: var(--poi-radar-color);
    background: rgba(220, 38, 38, 0.1);
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
}

/* Badges */
.poi-popup-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.poi-popup-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--poi-popup-border);
    color: var(--poi-popup-text-secondary);
}

.poi-popup-badge.badge-green {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.poi-popup-badge.badge-blue {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.poi-popup-badge.badge-yellow {
    background: rgba(234, 179, 8, 0.15);
    color: #ca8a04;
}

.poi-popup-badge.badge-red {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

/* Alerta (restrições) */
.poi-popup-alert {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 10px 12px;
}

.poi-popup-alert .poi-popup-info {
    color: var(--poi-popup-text);
    margin-bottom: 6px;
}

/* Telefone */
.poi-popup-telefone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--poi-balanca-color);
    text-decoration: none;
    margin-top: 8px;
}

.poi-popup-telefone:hover {
    text-decoration: underline;
}

/* Actions */
.poi-popup-actions {
    padding: 12px 16px;
    border-top: 1px solid var(--poi-popup-border);
    display: flex;
    gap: 8px;
}

.poi-popup-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.poi-popup-btn-rota {
    background: var(--poi-balanca-color);
    color: white;
}

.poi-popup-btn-rota:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.poi-popup-btn-rota:active {
    transform: translateY(0);
}

/* Footer */
.poi-popup-footer {
    padding: 8px 16px;
    font-size: 10px;
    color: var(--poi-popup-text-secondary);
    text-align: right;
    background: var(--poi-popup-border);
    border-top: 1px solid var(--poi-popup-border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAINEL DE FILTROS DE POI
   ═══════════════════════════════════════════════════════════════════════════ */

.poi-filtros-panel {
    position: absolute;
    top: 80px;
    right: 10px;
    background: var(--poi-popup-bg);
    border-radius: 12px;
    box-shadow: var(--poi-popup-shadow);
    z-index: var(--z-nav-base);
    max-width: 200px;
    overflow: hidden;
}

.poi-filtros-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--poi-popup-border);
    border-bottom: 1px solid var(--poi-popup-border);
}

.poi-filtros-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--poi-popup-text);
}

.poi-filtros-toggle-all {
    font-size: 11px;
    color: var(--poi-balanca-color);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

.poi-filtros-toggle-all:hover {
    text-decoration: underline;
}

.poi-filtros-list {
    padding: 8px;
    max-height: 350px;
    overflow-y: auto;
}

.poi-filtro-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.poi-filtro-item:hover {
    background: var(--poi-popup-border);
}

.poi-filtro-item.ativo {
    background: rgba(59, 130, 246, 0.1);
}

.poi-filtro-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid var(--poi-popup-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.poi-filtro-item.ativo .poi-filtro-checkbox {
    background: var(--poi-balanca-color);
    border-color: var(--poi-balanca-color);
}

.poi-filtro-item.ativo .poi-filtro-checkbox::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.poi-filtro-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
}

.poi-filtro-label {
    flex: 1;
    font-size: 13px;
    color: var(--poi-popup-text);
}

.poi-filtro-count {
    font-size: 11px;
    color: var(--poi-popup-text-secondary);
    background: var(--poi-popup-border);
    padding: 2px 6px;
    border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTÃO DE TOGGLE DO PAINEL
   ═══════════════════════════════════════════════════════════════════════════ */

.poi-filtros-btn {
    position: absolute;
    top: 80px;
    right: 10px;
    width: 44px;
    height: 44px;
    background: var(--poi-popup-bg);
    border: none;
    border-radius: 10px;
    box-shadow: var(--poi-popup-shadow);
    cursor: pointer;
    z-index: var(--z-filtro);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.2s ease;
}

.poi-filtros-btn:hover {
    transform: scale(1.05);
}

.poi-filtros-btn.ativo {
    background: var(--poi-balanca-color);
    color: white;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOADING STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.poi-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--poi-popup-bg);
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: var(--poi-popup-shadow);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: calc(var(--z-nav-base) + 1);
}

.poi-loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--poi-popup-border);
    border-top-color: var(--poi-balanca-color);
    border-radius: 50%;
    animation: poi-spin 0.8s linear infinite;
}

@keyframes poi-spin {
    to { transform: rotate(360deg); }
}

.poi-loading-text {
    font-size: 14px;
    color: var(--poi-popup-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALERTA DE POI (TOAST)
   ═══════════════════════════════════════════════════════════════════════════ */

.poi-alerta-toast {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: var(--poi-popup-bg);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: var(--z-toast-poi);
    opacity: 0;
    transition: all 0.3s ease;
    max-width: 90%;
}

.poi-alerta-toast.visivel {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.poi-alerta-toast.alta {
    border-left: 4px solid var(--poi-radar-color);
}

.poi-alerta-toast.media {
    border-left: 4px solid var(--poi-balanca-color);
}

.poi-alerta-toast.baixa {
    border-left: 4px solid var(--poi-posto-color);
}

.poi-alerta-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.poi-alerta-content {
    flex: 1;
}

.poi-alerta-titulo {
    font-size: 14px;
    font-weight: 600;
    color: var(--poi-popup-text);
    margin-bottom: 2px;
}

.poi-alerta-mensagem {
    font-size: 13px;
    color: var(--poi-popup-text-secondary);
}

.poi-alerta-fechar {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--poi-popup-border);
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: var(--poi-popup-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.poi-alerta-fechar:hover {
    background: var(--poi-popup-text-secondary);
    color: white;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE - MOBILE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    :root {
        /* 🔧 v11.2.195: era `--poi-marker-size: 28px` (valor FINAL, fixo) e
           `.poi-marker-icon { font-size: 14px }`. Como esta regra vem depois do :root
           do topo, ela vencia a cascata e o marcador ficava 28px FIXO no celular —
           ou seja, o seletor de tamanho nao teria efeito nenhum justamente no unico
           aparelho onde o motorista navega, e o slider pareceria quebrado.
           Sobrescrever a BASE (e nao o resultado) mantem o fator no circuito.
           De quebra: o tamanho real na pista hoje e 28 x 2.37 = ~66px, nao 57px. */
        --poi-marker-base: 28px;
        --poi-icon-base: 14px;
        --poi-popup-width: calc(100vw - 60px);
    }

    .poi-popup-header {
        padding: 12px;
    }
    
    .poi-popup-icon {
        font-size: 24px;
    }
    
    .poi-popup-title {
        font-size: 14px;
    }
    
    .poi-popup-body {
        padding: 10px 12px;
    }
    
    .poi-popup-info {
        font-size: 12px;
    }
    
    .poi-popup-badges {
        gap: 4px;
    }
    
    .poi-popup-badge {
        font-size: 10px;
        padding: 3px 6px;
    }
    
    .poi-popup-actions {
        padding: 10px 12px;
    }
    
    .poi-popup-btn {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    /* Painel de filtros em mobile */
    .poi-filtros-panel {
        position: fixed;
        top: auto;
        bottom: 70px;
        right: 10px;
        left: 10px;
        max-width: none;
        max-height: 50vh;
    }
    
    .poi-filtros-list {
        max-height: calc(50vh - 50px);
    }
    
    /* Alerta toast */
    .poi-alerta-toast {
        top: auto;
        bottom: 80px;
        left: 10px;
        right: 10px;
        transform: translateX(0) translateY(20px);
        max-width: none;
    }
    
    .poi-alerta-toast.visivel {
        transform: translateX(0) translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACESSIBILIDADE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .poi-marker-destacado .poi-marker-container,
    .poi-marker-destacado::before,
    .poi-loading-spinner {
        animation: none;
    }
    
    .poi-marker-container,
    .poi-popup-btn,
    .poi-filtro-item {
        transition: none;
    }
}

/* Focus states */
.poi-popup-btn:focus,
.poi-filtros-toggle-all:focus,
.poi-filtro-item:focus,
.poi-alerta-fechar:focus {
    outline: 2px solid var(--poi-balanca-color);
    outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .poi-marker-container {
        border: 2px solid white;
    }
    
    .poi-popup-badge {
        border: 1px solid currentColor;
    }
}