/*
Theme Name: IUTCM Theme
Theme URI: https://iutcm.edu.ve
Author: IUTCM
Author URI: https://iutcm.edu.ve
Description: Tema personalizado para el Instituto Universitario de Tecnología DR. Cristobal Mendoza, convertido desde Next.js.
Version: 1.0.0
Text Domain: iutcm-theme
*/

/* Variables CSS globales (copiadas de globals.css) */
:root {
  --background: #ffffff;
  --foreground: #171717;
  --primary: #042E47;
  /* Azul oscuro */
  --secondary: #0099cc;
  /* Azul celeste */
  --accent: #66ccff;
  /* Celeste claro */
  --neutral: #f5f5f5;
  --success: #4CAF50;
  --warning: #FFC107;
  --error: #F44336;
  --font-sans: 'Raleway', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
    --primary: #042E47;
    --secondary: #00b8e6;
    --accent: #80d4ff;
    --neutral: #2a2a2a;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Animaciones básicas */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideInFromBottom {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-fadeIn {
  animation: fadeIn 0.6s ease-in-out;
}

.animate-slideUp {
  animation: slideInFromBottom 0.6s ease-out;
}

/* Utilidades básicas (simulando Tailwind para estructura básica) */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.justify-between {
  justify-content: space-between;
}

.hidden {
  display: none;
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:items-center {
    align-items: center;
  }
}

/* Navigation Menu Styles */
#primary-menu,
#site-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#primary-menu li,
#site-navigation ul li {
  position: relative;
}

#primary-menu li a,
#site-navigation ul li a {
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 1rem;
  display: block;
  transition: all 0.3s ease;
  position: relative;
}

/* Animated underline effect */
#primary-menu li a::after,
#site-navigation ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--accent);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

/* Hover state */
#primary-menu li a:hover,
#site-navigation ul li a:hover {
  color: var(--accent) !important;
  transform: translateY(-2px);
}

#primary-menu li a:hover::after,
#site-navigation ul li a:hover::after {
  width: 80%;
}

/* Active/Current page state */
#primary-menu li.current-menu-item a,
#primary-menu li.current_page_item a,
#site-navigation ul li.current-menu-item a,
#site-navigation ul li.current_page_item a {
  color: var(--secondary) !important;
  font-weight: 700;
}

#primary-menu li.current-menu-item a::after,
#primary-menu li.current_page_item a::after,
#site-navigation ul li.current-menu-item a::after,
#site-navigation ul li.current_page_item a::after {
  width: 80%;
  background-color: var(--secondary);
}