/* Esconde scrollbar */
::-webkit-scrollbar { width: 0px; height: 0px; background: transparent; }
.tab-content { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; }
.tab-content.active { display: block; }
#map { height: 100%; width: 100%; z-index: 10; }

/* Animação do botão SOS */
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
    70% { box-shadow: 0 0 0 20px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.btn-sos { animation: pulse-red 2s infinite; }

/* Animação de pulso para localização ativa */
@keyframes pulse-purple {
    0% { box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(147, 51, 234, 0); }
    100% { box-shadow: 0 0 0 0 rgba(147, 51, 234, 0); }
}
.sharing-active { animation: pulse-purple 2s infinite; border-color: #9333ea !important; }

/* Animações utilitárias */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.animate-fade-in { animation: fade-in 0.25s ease-out forwards; }

/* Animação para surgimento em cascata */
@keyframes slide-up-fade {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-slide-up-fade { animation: slide-up-fade 0.4s ease-out forwards; }

/* Animação de slide da direita para a esquerda */
@keyframes slide-in-right {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
.animate-slide-in-right { animation: slide-in-right 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

@keyframes slide-out-right {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

.tab-content.tab-underneath { display: block !important; z-index: 10; }
.tab-content.sliding-out { display: block !important; z-index: 50; animation: slide-out-right 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* Aplica o slide da direita para a esquerda automaticamente na tela de publicação com estilo nativo */
#view-post-detail.active, #view-post-detail.sliding-out,
#view-share-contacts.active, #view-share-contacts.sliding-out { 
    background-color: #f8fafc; /* Fundo sólido (slate-50) para cobrir a tela anterior */
    z-index: 50; /* Garante que a view deslize sempre por cima do mapa/feed */
    box-shadow: -10px 0 25px rgba(0, 0, 0, 0.1); /* Sombra lateral criando profundidade */
}
#view-post-detail.active:not(.no-animation),
#view-share-contacts.active:not(.no-animation) { animation: slide-in-right 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* Botão de limpar busca no feed */
#feed-search-clear-btn {
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateY(-50%) scale(0.7);
    opacity: 0;
    pointer-events: none; /* Impede clique quando invisível */
}
#feed-search-clear-btn.visible {
    transform: translateY(-50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* Animações Onboarding */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-float { animation: float 3s ease-in-out infinite; }
@keyframes blob {
    0%, 100% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(15px, -25px) scale(1.1); }
    66% { transform: translate(-10px, 10px) scale(0.9); }
}
.animate-blob { animation: blob 7s infinite alternate; }
.animation-delay-2000 { animation-delay: 2s; }

/* Quick report button animation */
#home-report-btn { transform: translateY(0); transition: transform .28s ease, opacity .28s ease; }
#home-report-btn.hidden { opacity: 0; transform: translateY(-6px); }

/* Botão de Cadastrar desativado no Modo Claro */
body:not(.dark) #btn-register:disabled {
    background-color: #e2e8f0 !important; /* bg-slate-200 */
    color: #94a3b8 !important; /* text-slate-400 */
}

/* --- MODO ESCURO --- */
html.dark, html:has(body.dark) { background-color: #18181b !important; color-scheme: dark; }
body.dark, body.dark #app-container, body.dark #login-screen, body.dark #register-screen, body.dark #forgot-password-screen { background-color: #18181b !important; color: #f4f4f5 !important; color-scheme: dark; }
body.dark #view-post-detail.active, body.dark #view-post-detail.sliding-out, body.dark #view-share-contacts.active, body.dark #view-share-contacts.sliding-out { background-color: #18181b !important; box-shadow: -10px 0 25px rgba(0, 0, 0, 0.5); }
body.dark #login-logo-img { content: url("/images/logo-w.png") !important; }

/* Sobrescreve fundos claros por escuros */
body.dark .bg-white, .dark-map .bg-white, .dark-map.bg-white { background-color: #27272a !important; }
body.dark .bg-slate-50, body.dark .bg-gray-100, body.dark .bg-slate-100, .dark-map .bg-slate-50, .dark-map .bg-slate-100, .dark-map.bg-slate-50, .dark-map.bg-slate-100 { background-color: #18181b !important; }
body.dark .bg-purple-50, .dark-map .bg-purple-50, .dark-map.bg-purple-50 { background-color: #3f3f46 !important; } /* Zinc 700 */

/* Sobrescreve textos */
body.dark .text-slate-800, body.dark .text-slate-700, body.dark .text-gray-700, .dark-map .text-slate-800, .dark-map .text-slate-700, .dark-map.text-slate-800, .dark-map.text-slate-700 { color: #f4f4f5 !important; }
body.dark .text-slate-600, body.dark .text-slate-500, .dark-map .text-slate-600, .dark-map .text-slate-500, .dark-map.text-slate-600, .dark-map.text-slate-500 { color: #a1a1aa !important; }
body.dark .text-slate-400, .dark-map .text-slate-400, .dark-map.text-slate-400 { color: #71717a !important; }

/* Sobrescreve bordas */
body.dark .border-slate-100, body.dark .border-slate-200, body.dark .border-slate-300, .dark-map .border-slate-100, .dark-map .border-slate-200, .dark-map .border-slate-300, .dark-map.border-slate-100, .dark-map.border-slate-200, .dark-map.border-slate-300 { border-color: #3f3f46 !important; }
body.dark .border-slate-50, .dark-map .border-slate-50, .dark-map.border-slate-50 { border-color: #18181b !important; }

/* Elementos específicos */
body.dark input, body.dark textarea, body.dark select, .dark-map input, .dark-map textarea, .dark-map select { background-color: #27272a !important; color: white !important; border-color: #52525b !important; }
body.dark input.bg-transparent, body.dark textarea.bg-transparent, .dark-map input.bg-transparent { background-color: transparent !important; }
body.dark option { background-color: #27272a !important; color: #f4f4f5 !important; }
body.dark .nav-btn .icon-wrapper { color: #d4d4d8; }
body.dark #main-header { background-color: #7e22ce !important; } /* Purple 700 no header */
body.dark .bg-white\/90 { background-color: rgba(39, 39, 42, 0.9) !important; } /* Blur headers */
body.dark .nav-map-icon-btn, .dark-map .nav-map-icon-btn { color: #d4d4d8 !important; } /* Icones do mapa mais claros */
body.dark .nav-map-icon-btn:hover, .dark-map .nav-map-icon-btn:hover { color: #e9d5ff !important; }

/* Botões e elementos coloridos específicos em modo escuro */
body.dark .bg-purple-100 { background-color: #3f3f46 !important; color: #e9d5ff !important; border-color: #52525b !important; }
body.dark .text-purple-600, .dark-map .text-purple-600, .dark-map.text-purple-600 { color: #e9d5ff !important; }
body.dark .text-purple-400, .dark-map .text-purple-400, .dark-map.text-purple-400 { color: #e9d5ff !important; }

/* Botão de Cadastrar desativado no Modo Escuro */
body.dark #btn-register:disabled {
    background-color: #3f3f46 !important; /* bg-zinc-700 */
    color: #71717a !important; /* text-zinc-500 */
}

/* Corrige a cor de fundo do toggle ativado (peer-checked) no modo escuro */
body.dark .peer:checked + div { background-color: #9333ea !important; }
body.dark input[type="radio"] { accent-color: #9333ea !important; }

body.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, 0.2) !important; }
body.dark .bg-yellow-50 { background-color: #422006 !important; color: #fef08a !important; }
body.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.1) !important; color: #fdba74 !important; border-color: rgba(249, 115, 22, 0.2) !important; }
body.dark .border-yellow-100 { border-color: #713f12 !important; }
body.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.1) !important; color: #fcd34d !important; border-color: rgba(245, 158, 11, 0.2) !important; }
body.dark .border-amber-100, body.dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.2) !important; }
body.dark .text-amber-500, body.dark .text-amber-600 { color: #fbbf24 !important; }
body.dark .text-amber-700 { color: #fde68a !important; }

body.dark .text-yellow-800 { color: #fef08a !important; }
body.dark .text-yellow-900 { color: #fef9c3 !important; }
body.dark .text-red-800 { color: #fecaca !important; }

body.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.15) !important; color: #fecaca !important; border-color: rgba(239, 68, 68, 0.3) !important; }
body.dark .bg-slate-200 { background-color: #3f3f46 !important; color: #e4e4e7 !important; }
body.dark .shadow-green-100 { box-shadow: 0 10px 15px -3px rgba(6, 78, 59, 0.5), 0 4px 6px -2px rgba(6, 78, 59, 0.5) !important; }
body.dark .border-red-100, body.dark .border-red-200 { border-color: rgba(239, 68, 68, 0.2) !important; }

/* Tags coloridas em modo escuro */
body.dark .bg-blue-100 { background-color: #1e3a8a !important; color: #bfdbfe !important; }
body.dark .text-blue-700 { color: #bfdbfe !important; }
body.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1) !important; color: #bfdbfe !important; border-color: rgba(59, 130, 246, 0.2) !important; }
body.dark .border-blue-100, body.dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.2) !important; }

body.dark .bg-green-100 { background-color: #14532d !important; color: #bbf7d0 !important; }
body.dark .text-green-700 { color: #bbf7d0 !important; }

body.dark .bg-orange-100 { background-color: #7c2d12 !important; color: #fed7aa !important; }
body.dark .text-orange-700 { color: #fed7aa !important; }

body.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.1) !important; color: #a7f3d0 !important; border-color: rgba(16, 185, 129, 0.2) !important; }
body.dark .border-emerald-100 { border-color: rgba(16, 185, 129, 0.2) !important; }
body.dark .text-emerald-900, body.dark .text-emerald-800 { color: #ecfdf5 !important; }
body.dark .text-emerald-700 { color: #6ee7b7 !important; }
body.dark .text-emerald-600 { color: #34d399 !important; }

body.dark .bg-teal-100 { background-color: rgba(20, 184, 166, 0.15) !important; color: #99f6e4 !important; border-color: rgba(20, 184, 166, 0.3) !important; }
body.dark .text-teal-600 { color: #5eead4 !important; }

body.dark .text-red-700, .dark-map .text-red-700, .dark-map.text-red-700 { color: #fecaca !important; }
body.dark .border-purple-100, body.dark .border-purple-200 { border-color: rgba(147, 51, 234, 0.3) !important; }
body.dark .text-purple-700, .dark-map .text-purple-700, .dark-map.text-purple-700 { color: #e9d5ff !important; }

body.dark .text-blue-600 { color: #60a5fa !important; } /* Blue-400 */

/* Botão de finalizar Onboarding no modo escuro */
body.dark #onboarding-controls .text-emerald-600 { color: #ffffff !important; }

/* Correção do botão flutuante da barra do mapa estendida no modo escuro */
body.dark .nav-map-plus-btn, .dark-map .nav-map-plus-btn { border-color: #27272a !important; }

/* Ajuste de sombras específicas (ex: botão de filtro) no modo escuro */
body.dark .shadow-purple-200 { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important; }
body.dark .shadow-red-200 { box-shadow: 0 10px 15px -3px rgba(127, 29, 29, 0.5), 0 4px 6px -2px rgba(127, 29, 29, 0.3) !important; }
body.dark .shadow-blue-200 { box-shadow: 0 10px 15px -3px rgba(30, 58, 138, 0.5), 0 4px 6px -2px rgba(30, 58, 138, 0.3) !important; }
body.dark .shadow-green-200 { box-shadow: 0 10px 15px -3px rgba(20, 83, 45, 0.5), 0 4px 6px -2px rgba(20, 83, 45, 0.3) !important; }


/* Previne flash branco no mapa enquanto carrega tiles no modo escuro */
body.dark #map, body.dark .maplibregl-map { background-color: #18181b !important; }

/* Correção de hovers e interações claras no modo escuro (filtro do mapa, listas, etc) */
body.dark .hover\:bg-slate-50:hover, 
body.dark .hover\:bg-slate-100:hover,
body.dark .hover\:bg-gray-50:hover,
.dark-map .hover\:bg-slate-50:hover,
.dark-map .hover\:bg-slate-100:hover,
.dark-map.hover\:bg-slate-50:hover,
.dark-map.hover\:bg-slate-100:hover { 
    background-color: #3f3f46 !important; /* Zinc-700 - Destaque sutil */
}

body.dark .active\:bg-slate-100:active,
body.dark .active\:bg-gray-100:active,
body.dark .active\:bg-slate-50:active,
.dark-map .active\:bg-slate-100:active,
.dark-map .active\:bg-slate-50:active,
.dark-map.active\:bg-slate-100:active,
.dark-map.active\:bg-slate-50:active {
    background-color: #52525b !important; /* Zinc-600 - Clique */
}
body.dark .hover\:bg-red-50:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
}
/* Corrige cor do "handle" do toggle no modo escuro */
body.dark .peer + div::after { background-color: white !important; }


/* Conserta flash branco ao clicar na notificação e remove gradiente do login no modo escuro */
body.dark .notif-item:active { background-color: #3f3f46 !important; }
body.dark #login-screen .blur-3xl, body.dark #register-screen .blur-3xl, body.dark #forgot-password-screen .blur-3xl { opacity: 0 !important; }

/* Correção Radio Buttons Share (Modo Escuro) */
body.dark .share-radio-option:has(:checked) { background-color: #3f3f46 !important; border-color: #71717a !important; }

/* Tags de filtro ativas (Modo Escuro) */
body.dark .filter-tag-option:has(:checked) { background-color: #3f3f46 !important; border-color: #52525b !important; }

/* Modal Reportar POI ativas (Modo Escuro) */
body.dark .report-poi-option:has(:checked) { background-color: #3f3f46 !important; border-color: #9333ea !important; color: #e9d5ff !important; }

/* --- CAIXAS DE LOCALIZAÇÃO DO MAPA (POPUPS) --- */
.maplibregl-popup-content {
    border-radius: 1rem !important;
    padding: 10px 14px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #f1f5f9;
}

.maplibregl-popup-close-button {
    right: 8px !important; top: 8px !important;
    font-size: 18px !important; color: #94a3b8 !important;
}

.maplibregl-popup-close-button:hover { background-color: transparent !important; color: #475569 !important; }

/* MapLibre Popups no Modo Escuro */
body.dark .maplibregl-popup-content, .dark-map .maplibregl-popup-content { 
    background-color: #27272a !important; 
    border-color: #3f3f46 !important; 
}
body.dark .maplibregl-popup-anchor-bottom .maplibregl-popup-tip, body.dark .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, body.dark .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip, .dark-map .maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .dark-map .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, .dark-map .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: #27272a !important; }
body.dark .maplibregl-popup-anchor-top .maplibregl-popup-tip, body.dark .maplibregl-popup-anchor-top-left .maplibregl-popup-tip, body.dark .maplibregl-popup-anchor-top-right .maplibregl-popup-tip, .dark-map .maplibregl-popup-anchor-top .maplibregl-popup-tip, .dark-map .maplibregl-popup-anchor-top-left .maplibregl-popup-tip, .dark-map .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: #27272a !important; }
body.dark .maplibregl-popup-anchor-left .maplibregl-popup-tip, .dark-map .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: #27272a !important; }
body.dark .maplibregl-popup-anchor-right .maplibregl-popup-tip, .dark-map .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: #27272a !important; }

/* --- FORÇAR MODO CLARO NO MAPA E MODAIS MESMO SE GLOBAL FOR ESCURO --- */
body.dark .light-map .bg-white, body.dark .light-map.bg-white { background-color: #ffffff !important; }
body.dark .light-map .bg-slate-50, body.dark .light-map.bg-slate-50 { background-color: #f8fafc !important; }
body.dark .light-map .bg-slate-100, body.dark .light-map.bg-slate-100 { background-color: #f1f5f9 !important; }
body.dark .light-map .bg-purple-50, body.dark .light-map.bg-purple-50 { background-color: #faf5ff !important; }
body.dark .light-map .bg-red-50, body.dark .light-map.bg-red-50 { background-color: #fef2f2 !important; }

body.dark .light-map .text-slate-800, body.dark .light-map.text-slate-800 { color: #1e293b !important; }
body.dark .light-map .text-slate-700, body.dark .light-map.text-slate-700 { color: #334155 !important; }
body.dark .light-map .text-slate-600, body.dark .light-map.text-slate-600 { color: #475569 !important; }
body.dark .light-map .text-slate-500, body.dark .light-map.text-slate-500 { color: #64748b !important; }
body.dark .light-map .text-slate-400, body.dark .light-map.text-slate-400 { color: #94a3b8 !important; }
body.dark .light-map .text-purple-600, body.dark .light-map.text-purple-600 { color: #9333ea !important; }
body.dark .light-map .text-purple-700, body.dark .light-map.text-purple-700 { color: #7e22ce !important; }
body.dark .light-map .text-red-700, body.dark .light-map.text-red-700 { color: #b91c1c !important; }

body.dark .light-map .nav-map-icon-btn { color: #94a3b8 !important; }
body.dark .light-map .nav-map-icon-btn:hover { color: #9333ea !important; }
body.dark .light-map .nav-map-plus-btn { border-color: #ffffff !important; }

body.dark .light-map .border-slate-100, body.dark .light-map.border-slate-100 { border-color: #f1f5f9 !important; }
body.dark .light-map .border-slate-200, body.dark .light-map.border-slate-200 { border-color: #e2e8f0 !important; }
body.dark .light-map .border-slate-300, body.dark .light-map.border-slate-300 { border-color: #cbd5e1 !important; }
body.dark .light-map .border-slate-50, body.dark .light-map.border-slate-50 { border-color: #f8fafc !important; }

body.dark .light-map input, body.dark .light-map textarea, body.dark .light-map select { background-color: #ffffff !important; color: #334155 !important; border-color: #e2e8f0 !important; }
body.dark .light-map input.bg-transparent, body.dark .light-map textarea.bg-transparent { background-color: transparent !important; border-color: transparent !important; }

body.dark .light-map .maplibregl-popup-content { background-color: #ffffff !important; border-color: #f1f5f9 !important; }
body.dark .light-map .maplibregl-popup-anchor-bottom .maplibregl-popup-tip, body.dark .light-map .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, body.dark .light-map .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: #ffffff !important; }
body.dark .light-map .maplibregl-popup-anchor-top .maplibregl-popup-tip, body.dark .light-map .maplibregl-popup-anchor-top-left .maplibregl-popup-tip, body.dark .light-map .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: #ffffff !important; }
body.dark .light-map .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: #ffffff !important; }
body.dark .light-map .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: #ffffff !important; }

body.dark .light-map .hover\:bg-slate-50:hover { background-color: #f8fafc !important; }
body.dark .light-map .active\:bg-slate-50:active { background-color: #f8fafc !important; }
body.dark .light-map .active\:bg-slate-100:active { background-color: #f1f5f9 !important; }

/* --- Correções da Tela de Compartilhamento (Modo Escuro) --- */
body.dark .share-type-card:has(input:checked) {
    background-color: rgba(147, 51, 234, 0.15) !important; /* Roxo sutil para destaque */
    border-color: #9333ea !important;
}
body.dark .share-contact-item:has(input:checked) {
    background-color: rgba(147, 51, 234, 0.15) !important; 
}
/* Conserta pílula da duração ativa para não ficar com fundo cinza-escuro opaco demais */
body.dark .peer:checked + .share-duration-pill {
    background-color: #9333ea !important;
    color: #ffffff !important;
}
body.dark .share-duration-pill {
    color: #94a3b8 !important; /* Deixa o texto inativo ligeiramente mais legível */
}