@import "tailwindcss";

/* 1. CONFIGURACIÓN BASE MODO OSCURO */
.dark body {
  background-color: #111827; /* gray-900 */
  color: white;
}

.dark header {
  background: linear-gradient(to bottom, #374151, #1f2937, #111827);
  border-color: #374151;
}

.dark main {
  background-color: #111827;
}

.dark section {
  background: linear-gradient(to bottom, #374151, #1f2937, #111827);
}

.dark h1,
.dark h2,
.dark h3,
.dark p,
.dark a {
  color: white;
  transition: all 0.3s ease-in-out;
}

/* Color general para enlaces en modo oscuro (excepto títulos de proyectos) */
.dark a:hover {
  color: #d1d5db; /* gray-300 */
}

.dark footer {
  background: linear-gradient(to bottom, #374151, #1f2937, #111827);
  border-color: #374151;
  color: white;
}

/* 2. LÓGICA DE INTERACCIÓN DE TARJETAS (H3) */

/* Definición base para asegurar suavidad */
h3 {
  transition: all 0.3s ease-in-out !important;
}

/* HOVER TEMA CLARO: Al tocar cualquier parte de la tarjeta (a) */
h3:hover, 
a:hover h3 {
  color: #1e40af !important; /* Azul Cobalto Profundo */
  transform: translateX(8px) !important;
  cursor: pointer;
}

/* HOVER TEMA OSCURO: Al tocar cualquier parte de la tarjeta (a) */
/* CAMBIO CLAVE: Se usa #3b82f6 (Azul brillante) para que resalte sobre el fondo negro */
.dark h3:hover,
.dark a:hover h3 {
  color: #1e62cf !important; 
  transform: translateX(8px) !important;
}

/* 3. OVERRIDE DE GRADIENTES EN MODO OSCURO */
.dark [class*="bg-linear-to-b"] {
  background: linear-gradient(to bottom, #374151, #1f2937, #111827) !important;
}

.dark [class*="bg-linear-to-br"] {
  background: linear-gradient(to bottom right, #06b6d4, #3b82f6) !important;
}

.dark .bg-clip-text {
  background: linear-gradient(to bottom right, #06b6d4, #3b82f6) !important;
}

.dark span.bg-clip-text.text-transparent {
  background: linear-gradient(to bottom right, #06b6d4, #3b82f6) !important;
}