/* Importar fuentes de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* Colores personalizados para RootCause - Guía de Marca */

:root {
  /* Tema Claro - Según marca.md */
  --vp-c-brand-1: #FFD700; /* Dorado principal más brillante */
  --vp-c-brand-2: #FFE55C; /* Dorado claro más brillante (acento) */
  --vp-c-brand-3: #E6C200; /* Dorado más oscuro más brillante */
  
  --vp-c-bg: #FFFFFF; /* Fondo principal blanco puro */
  --vp-c-bg-soft: #F6F7F9; /* Fondo secundario gris muy claro */
  --vp-c-bg-mute: #E5E7EB; /* Gris claro para elementos muteados */
  
  --vp-c-text-1: #151517; /* Texto principal negro suave */
  --vp-c-text-2: #53535A; /* Texto secundario gris medio */
  --vp-c-text-3: #8B8B8F; /* Texto terciario gris más claro */
  
  --vp-c-border: #E5E7EB; /* Bordes gris claro */
  --vp-c-divider: #E5E7EB; /* Divisores */
  
  --vp-c-sponsor: #FFD700; /* Color para sponsors */
}

.dark {
  /* Tema Oscuro - Según marca.md */
  --vp-c-brand-1: #FFE55C; /* Dorado brillante más intenso */
  --vp-c-brand-2: #FFF176; /* Dorado claro brillante más intenso (acento) */
  --vp-c-brand-3: #FFD54F; /* Dorado más oscuro más brillante */
  
  --vp-c-bg: #0B0B0C; /* Fondo principal negro profundo */
  --vp-c-bg-soft: #121214; /* Fondo secundario gris muy oscuro */
  --vp-c-bg-mute: #1E1E20; /* Gris oscuro para elementos muteados */
  
  --vp-c-text-1: #F2F2F3; /* Texto principal blanco suave */
  --vp-c-text-2: #B4B4B6; /* Texto secundario gris claro */
  --vp-c-text-3: #8B8B8F; /* Texto terciario gris medio */
  
  --vp-c-border: #1E1E20; /* Bordes gris oscuro */
  --vp-c-divider: #1E1E20; /* Divisores */
  
  --vp-c-sponsor: #FFE55C; /* Color para sponsors */
}

/* Personalización de botones */
.VPButton.brand,
.VPHero .VPButton.brand,
.VPHero .actions .VPButton.brand {
  background-color: var(--vp-c-brand-1) !important;
  color: #000000 !important; /* Texto negro para mejor contraste */
  border-color: var(--vp-c-brand-1) !important;
}

.VPButton.brand:hover,
.VPHero .VPButton.brand:hover,
.VPHero .actions .VPButton.brand:hover {
  background-color: var(--vp-c-brand-2) !important;
  border-color: var(--vp-c-brand-2) !important;
  color: #000000 !important; /* Mantener texto negro en hover */
}

.VPButton.alt {
  color: var(--vp-c-brand-1);
  border-color: var(--vp-c-brand-1);
}

.VPButton.alt:hover {
  background-color: var(--vp-c-brand-1);
  color: #000000; /* Texto negro para mejor contraste */
}

/* Personalización de enlaces */
a {
  color: var(--vp-c-brand-1);
}

a:hover {
  color: var(--vp-c-brand-2);
}

/* Personalización de tabs personalizados */
.tabs {
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-border);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.tabs label {
  background-color: var(--vp-c-bg-soft);
  color: var(--vp-c-text-2);
  border-bottom: 3px solid transparent;
}

.tabs label:hover {
  background-color: var(--vp-c-bg-mute);
  color: var(--vp-c-text-1);
}

.tabs input[type="radio"]:checked + label {
  background-color: var(--vp-c-bg);
  color: var(--vp-c-brand-1);
  border-bottom-color: var(--vp-c-brand-1);
}

.tab-content {
  background-color: var(--vp-c-bg);
}

.tab-content pre {
  background-color: var(--vp-c-bg-mute);
  color: var(--vp-c-text-1);
  border: 1px solid var(--vp-c-border);
}

.tab-content code {
  background-color: var(--vp-c-bg-mute);
  color: var(--vp-c-text-1);
}

/* Aplicar fuentes */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

code, pre {
  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
}

/* Efectos de gradiente para texto */
.gradient-text {
  background: linear-gradient(135deg, var(--vp-c-brand-1), var(--vp-c-brand-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.pulse-slow {
  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--vp-c-bg-soft);
}

::-webkit-scrollbar-thumb {
  background: var(--vp-c-border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--vp-c-text-2);
}

/* Estados de selección */
::selection {
  background: rgba(255, 215, 0, 0.2);
  color: var(--vp-c-text-1);
}

.dark ::selection {
  background: rgba(255, 229, 92, 0.2);
  color: var(--vp-c-text-1);
}

/* Logo del hero que cambia según el tema */
.hero-image,
.VPHero .image img {
  transition: all 0.3s ease;
}

/* Logo del navbar para tema claro */
.VPNav .title .logo {
  content: url('/logo-light.png');
}

/* Logo del navbar para tema oscuro */
.dark .VPNav .title .logo {
  content: url('/logo-dark.png');
}

/* Logo del hero para tema claro */
.hero-image,
.VPHero .image img {
  content: url('/mole-front-light.png');
}

/* Logo del hero para tema oscuro */
.dark .hero-image,
.dark .VPHero .image img {
  content: url('/mole-front-dark.png');
}

/* Imágenes de perfil para tema claro */
.mole-side-image {
  content: url('/mole-side-light.png');
}

/* Imágenes de perfil para tema oscuro */
.dark .mole-side-image {
  content: url('/mole-side-dark.png');
}

/* Asegurar que el cambio sea suave */
.VPHero .image {
  transition: all 0.3s ease;
}