/* ══════════════════════════════════════════════════════════════
   GLOBALS — Alcaldía Bolivariana de Tucupita
   ══════════════════════════════════════════════════════════════ */

/* ─── Variables CSS personalizadas ─── */
:root {
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  isolation: isolate;
  color: #1f2937;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f8f6f0;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Compensar header fixed (topbar ~44px + navbar ~64px) */
  padding-top: 108px;
}

@media (max-width: 767px) {
  body {
    padding-top: 64px; /* Solo navbar en móvil (topbar oculta) */
  }
}

html.dark body {
  color: #f1f5f9;
  background-color: #0a0e17;
}

/* ── Marca de agua fija (fondo.png) ── */
body::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url('/assets/img/fondo.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.15;
  transform: translateZ(0);
  will-change: transform;
}

html.dark body::after {
  opacity: 0.08;
}

/* ── Fondo dinámico con partículas sutiles ── */
body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: transparent;
  background-image: none;
  transform: translateZ(0);
}

html.dark body::before {
  background-color: transparent;
  background-image: none;
}

/* ── Animaciones personalizadas ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-10px); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 173, 205, 0.3); }
  50%      { box-shadow: 0 0 40px rgba(0, 173, 205, 0.6); }
}

@keyframes pulseSlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.8; transform: scale(1.05); }
}

.animate-pulse-slow {
  animation: pulseSlow 4s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-10deg) scale(0.9); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}

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

@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%) scale(0.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(100%) scale(0.9); }
}

@keyframes progressBar {
  from { width: 100%; }
  to   { width: 0%; }
}

@keyframes lightboxIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

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

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

@keyframes newsTicker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes kenBurns {
  0%   { transform: scale(1) translate(0, 0); }
  50%  { transform: scale(1.08) translate(-1%, -1%); }
  100% { transform: scale(1) translate(0, 0); }
}

/* ── Clases de animación ── */
.animate-fade-in-up    { animation: fadeInUp 0.6s var(--transition-smooth) forwards; }
.animate-fade-in-left  { animation: fadeInLeft 0.6s var(--transition-smooth) forwards; }
.animate-fade-in-right { animation: fadeInRight 0.6s var(--transition-smooth) forwards; }
.animate-scale-in      { animation: scaleIn 0.5s var(--transition-smooth) forwards; }
.animate-float         { animation: float 3s ease-in-out infinite; }
.animate-pulse-glow    { animation: pulseGlow 2s ease-in-out infinite; }
.animate-shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}
.animate-gradient {
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
}
.animate-slide-in-down { animation: slideInDown 0.5s var(--transition-smooth) forwards; }
.animate-rotate-in     { animation: rotateIn 0.6s var(--transition-smooth) forwards; }
.animate-slide-in-right { animation: slideInRight 0.5s var(--transition-smooth) forwards; }
.animate-ripple        { animation: ripple 0.6s linear forwards; }
.animate-toast-in      { animation: toastIn 0.4s var(--transition-smooth) forwards; }
.animate-toast-out     { animation: toastOut 0.3s var(--transition-smooth) forwards; }
.animate-lightbox-in   { animation: lightboxIn 0.3s var(--transition-smooth) forwards; }
.animate-tab-fade-in   { animation: tabFadeIn 0.4s var(--transition-smooth) forwards; }
.animate-count-up      { animation: countUp 0.6s var(--transition-smooth) forwards; }

/* ── Retrasos de animación ── */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }

/* ── Efectos de hover modernos ── */
.hover-lift {
  transition: transform 0.3s var(--transition-smooth), box-shadow 0.3s var(--transition-smooth);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.hover-glow {
  transition: box-shadow 0.3s var(--transition-smooth);
}
.hover-glow:hover {
  box-shadow: 0 0 30px rgba(0, 173, 205, 0.3);
}

/* ── Glassmorphism ── */
.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
html.dark .glass {
  background: rgba(15, 20, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Scrollbar personalizada ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f0ede5; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00ADCD, #E50051);
  border-radius: 4px;
}
html.dark ::-webkit-scrollbar-track { background: #0a0e17; }

/* ── Modo oscuro: cobertura global ── */
html.dark { color-scheme: dark; }

html.dark main > div.bg-white,
html.dark main > div.bg-\[\#f6f8fb\],
html.dark main > article.bg-white {
  background-color: #0f172a !important;
}
html.dark main .bg-white {
  background-color: #1e293b !important;
}
html.dark main [class*="bg-white/"]:not([class*="text-white"]) {
  background-color: rgb(30 41 59 / 0.92) !important;
}
html.dark main .bg-neutral-50,
html.dark main .bg-neutral-100 {
  background-color: #0f172a !important;
}
html.dark main [class*="bg-neutral-50/"] {
  background-color: rgb(15 23 42 / 0.92) !important;
}
html.dark main section[class*="via-white"]:not([class*="bg-azul-rey"]):not([class*="bg-neutral-900"]) {
  background-image: linear-gradient(to right, #0f172a, #1e293b, #0f172a) !important;
}
html.dark main section[class*="via-white"][class*="from-azul"] {
  background-image: linear-gradient(
    to bottom right,
    rgb(0 173 205 / 0.14),
    #1e293b,
    rgb(229 0 81 / 0.1)
  ) !important;
}
html.dark main .text-neutral-900,
html.dark main .text-neutral-800,
html.dark main .text-neutral-700,
html.dark main .text-black {
  color: #f1f5f9 !important;
}
html.dark main .text-neutral-600,
html.dark main .text-neutral-500 {
  color: #94a3b8 !important;
}
html.dark main a.text-azul-rey,
html.dark main a[class*="text-azul-rey"] {
  color: #38bdf8 !important;
}
html.dark main .border-neutral-200,
html.dark main .border-neutral-100,
html.dark main .border-neutral-300,
html.dark main [class*="border-neutral-200/"] {
  border-color: #475569 !important;
}
html.dark main [class*="border-white"] {
  border-color: rgb(71 85 105 / 0.55) !important;
}
html.dark main .divide-neutral-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: #475569 !important;
}
html.dark main input,
html.dark main textarea,
html.dark main select {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}
html.dark main .prose,
html.dark main .prose-neutral {
  color: #cbd5e1 !important;
}
html.dark main .hover\:bg-white:hover,
html.dark main .hover\:bg-neutral-50:hover {
  background-color: #334155 !important;
}
html.dark main .shadow-sm,
html.dark main .shadow-md,
html.dark main .shadow-lg,
html.dark main .shadow-xl {
  --tw-shadow-color: rgb(0 0 0 / 0.45);
}
html.dark aside.bg-white {
  background-color: #1e293b !important;
  border-color: #475569 !important;
}
html.dark footer .bg-white {
  background-color: #334155 !important;
}
html.dark footer .text-neutral-700,
html.dark footer .text-neutral-500 {
  color: #94a3b8 !important;
}
html.dark footer [class*="ring-neutral-200"] {
  --tw-ring-color: rgb(71 85 105 / 0.8) !important;
}

/* ─── Dark mode: Popups de instituciones (fuera de <main>) ─── */
html.dark .institucion-popup .bg-white {
  background-color: #1e293b !important;
}
html.dark .institucion-popup .text-gray-900 {
  color: #f1f5f9 !important;
}
html.dark .institucion-popup .text-gray-600 {
  color: #94a3b8 !important;
}
html.dark .institucion-popup .text-gray-500 {
  color: #64748b !important;
}
html.dark .institucion-popup .border-gray-100 {
  border-color: #475569 !important;
}

/* ─── Dark mode: Header y navegación ─── */
html.dark .header-premium .nav-link-premium {
  color: #cbd5e1 !important;
}
html.dark .header-premium .nav-link-premium:hover,
html.dark .header-premium .nav-link-premium.active {
  color: #00ADCD !important;
}
html.dark .header-premium .dropdown-menu {
  background-color: #1e293b !important;
  border-color: #475569 !important;
}
html.dark .header-premium .dropdown-item {
  color: #cbd5e1 !important;
}
html.dark .header-premium .dropdown-item:hover {
  background-color: #334155 !important;
  color: #00ADCD !important;
}

/* ─── Dark mode: Footer ─── */
html.dark footer .text-gray-400 {
  color: #94a3b8 !important;
}
html.dark footer a.text-gray-400:hover {
  color: #00ADCD !important;
}