/**
 * LibrosFCEA - Dark Mode Styles
 * Estilos globales para el modo oscuro
 */

/* Variables CSS para Dark Mode */
:root {
  --dm-bg-primary: #1a1a1a;
  --dm-bg-secondary: #2a2a2a;
  --dm-bg-tertiary: #3a3a3a;
  --dm-text-primary: #ffffff;
  --dm-text-secondary: #e0e0e0;
  --dm-text-muted: #b0b0b0;
  --dm-border-color: #404040;
  --dm-accent-color: #4a922f;
  --dm-accent-hover: #5da437;
  --dm-shadow: 0 2px 8px rgba(0,0,0,0.3);
  --dm-shadow-lg: 0 4px 16px rgba(0,0,0,0.4);
}

/* ==========================================================================
   ESTILOS GLOBALES DARK MODE
   ========================================================================== */

.dark-mode {
  color-scheme: dark;
}

.dark-mode body {
  background: var(--dm-bg-primary);
  color: var(--dm-text-primary);
}

.dark-mode main {
  background: var(--dm-bg-primary);
  color: var(--dm-text-primary);
}

/* ==========================================================================
   HEADER DARK MODE
   ========================================================================== */

.dark-mode #header {
  background: var(--dm-bg-secondary);
  border-bottom: 1px solid var(--dm-border-color);
}

.dark-mode #header .top-bar {
  background: var(--dm-bg-secondary);
}

.dark-mode #header .subheader {
  background: var(--dm-bg-tertiary);
  border-top: 1px solid var(--dm-border-color);
}

.dark-mode .search-form {
  background: var(--dm-bg-primary);
  border-radius: 8px;
  padding: 5px;
}

.dark-mode .search-field {
  background: var(--dm-bg-primary);
  color: var(--dm-text-primary);
  border: 1px solid var(--dm-border-color);
}

.dark-mode .search-field::placeholder {
  color: var(--dm-text-muted);
}

.dark-mode .search-field:focus {
  border-color: var(--dm-accent-color);
  box-shadow: 0 0 0 2px rgba(74, 146, 47, 0.2);
}

/* Categories Grid Dark Mode */
.dark-mode .categories-grid li {
  background: var(--dm-bg-secondary);
  border: 1px solid var(--dm-border-color);
}

.dark-mode .categories-grid li:hover {
  background: var(--dm-bg-tertiary);
  transform: translateY(-2px);
  box-shadow: var(--dm-shadow);
}

.dark-mode .categories-grid a {
  color: var(--dm-text-primary);
}

/* ==========================================================================
   CONTENIDO PRINCIPAL DARK MODE
   ========================================================================== */

.dark-mode .main-content,
.dark-mode .sidebar {
  background: var(--dm-bg-secondary);
  color: var(--dm-text-primary);
  border: 1px solid var(--dm-border-color);
}

.dark-mode .hero {
  background: var(--dm-bg-secondary);
}

.dark-mode .hero .content {
  background: rgba(26, 26, 26, 0.9);
}

/* Títulos */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  color: var(--dm-text-primary);
}

.dark-mode .wp-block-heading {
  color: var(--dm-text-primary);
}

/* Enlaces */
.dark-mode a {
  color: var(--dm-accent-color);
}

.dark-mode a:hover {
  color: var(--dm-accent-hover);
}

/* ==========================================================================
   MATERIA.HTML DARK MODE
   ========================================================================== */

/* Header de materia */
.dark-mode .materia-header {
  background: linear-gradient(135deg, var(--dm-accent-color), #3a7c23);
}

.dark-mode #materia-header-title {
  background: linear-gradient(135deg, var(--dm-accent-color), #3a7c23) !important;
}

/* Breadcrumb */
.dark-mode .nav-breadcrumb {
  background: var(--dm-bg-secondary);
  border-bottom: 1px solid var(--dm-border-color);
  color: var(--dm-text-secondary);
}

/* Info sections */
.dark-mode .info-section h2 {
  color: var(--dm-accent-color);
  border-bottom-color: var(--dm-accent-color);
}

.dark-mode .description {
  background: var(--dm-bg-tertiary);
  border-left-color: var(--dm-accent-color);
  color: var(--dm-text-secondary);
}

.dark-mode .description::before {
  color: var(--dm-accent-color);
}

/* Cards de recursos */
.dark-mode .recurso-card {
  background: linear-gradient(135deg, var(--dm-bg-secondary) 0%, var(--dm-bg-tertiary) 100%);
  border: 1px solid var(--dm-border-color);
  border-left-color: var(--dm-accent-color);
  box-shadow: var(--dm-shadow);
}

.dark-mode .recurso-card::before {
  background: var(--dm-accent-color);
}

.dark-mode .recurso-card h3 {
  color: var(--dm-accent-color);
}

.dark-mode .recurso-card h3::before {
  background: var(--dm-accent-color);
}

/* Enlaces de recursos */
.dark-mode .recurso-links a {
  background: rgba(74, 146, 47, 0.1);
  border: 1px solid rgba(74, 146, 47, 0.2);
  color: var(--dm-text-primary);
}

.dark-mode .recurso-links a:hover,
.dark-mode .recurso-links a:focus {
  background: rgba(74, 146, 47, 0.2);
  border-color: rgba(74, 146, 47, 0.4);
}

.dark-mode .recurso-links a .icon {
  background: var(--dm-accent-color);
  color: white;
}

.dark-mode .recurso-links a::after {
  color: var(--dm-accent-color);
}

.dark-mode .recurso-info strong {
  color: var(--dm-text-primary);
}

.dark-mode .recurso-info small {
  color: var(--dm-text-muted) !important;
}

/* Sidebar */
.dark-mode .sidebar-section h3 {
  color: var(--dm-accent-color);
  border-bottom-color: var(--dm-border-color);
}

.dark-mode .sidebar-info {
  background: var(--dm-bg-tertiary);
  border: 1px solid var(--dm-border-color);
}

.dark-mode .sidebar-info strong {
  color: var(--dm-accent-color);
}

/* Estados de carga/error */
.dark-mode .loading-state,
.dark-mode .error-state {
  background: var(--dm-bg-secondary);
  border: 1px solid var(--dm-border-color);
  color: var(--dm-text-primary);
}

.dark-mode .error-state {
  background: rgba(211, 47, 47, 0.1);
  border-color: rgba(211, 47, 47, 0.3);
}

/* ==========================================================================
   INDEX.HTML DARK MODE
   ========================================================================== */

/* Sidebar navigation */
.dark-mode .sidebar-nav {
  background: var(--dm-bg-secondary);
}

.dark-mode .sidebar-nav a {
  color: var(--dm-text-secondary);
  border-bottom: 1px solid var(--dm-border-color);
}

.dark-mode .sidebar-nav a:hover {
  background: var(--dm-bg-tertiary);
  color: var(--dm-text-primary);
}

.dark-mode .sidebar-section-title {
  background: var(--dm-accent-color);
  color: white;
}

/* Welcome section */
.dark-mode .welcome-section {
  background: var(--dm-bg-secondary);
  border: 1px solid var(--dm-border-color);
}

/* Categories grid para carreras */
.dark-mode .categories-grid .title {
  background: var(--dm-bg-tertiary);
  border: 1px solid var(--dm-border-color);
}

.dark-mode .categories-grid .featured-post-body {
  background: var(--dm-bg-secondary);
  border: 1px solid var(--dm-border-color);
}

.dark-mode .categories-grid .featured-post-body:hover {
  background: var(--dm-bg-tertiary);
}

.dark-mode .categories-grid .featured-post-body a {
  color: var(--dm-text-secondary);
}

.dark-mode .categories-grid .featured-post-body a:hover {
  color: var(--dm-accent-color);
}

/* Tablas */
.dark-mode table {
  background: var(--dm-bg-secondary);
  border: 1px solid var(--dm-border-color);
}

.dark-mode table th {
  background: var(--dm-bg-tertiary);
  color: var(--dm-text-primary);
  border-bottom: 2px solid var(--dm-border-color);
}

.dark-mode table td {
  border-bottom: 1px solid var(--dm-border-color);
  color: var(--dm-text-secondary);
}

.dark-mode table tr:hover {
  background: var(--dm-bg-tertiary);
}

/* ==========================================================================
   FOOTER DARK MODE
   ========================================================================== */

.dark-mode .footer {
  background: var(--dm-bg-secondary) !important;
  border-top: 1px solid var(--dm-border-color);
}

.dark-mode .footer h3,
.dark-mode .footer h4 {
  color: var(--dm-accent-color) !important;
  border-bottom-color: var(--dm-accent-color) !important;
}

.dark-mode .footer p,
.dark-mode .footer li {
  color: var(--dm-text-muted) !important;
}

.dark-mode .footer a {
  color: var(--dm-text-secondary) !important;
}

.dark-mode .footer a:hover {
  color: var(--dm-accent-color) !important;
}

.dark-mode .footer-section > div {
  background: var(--dm-bg-tertiary) !important;
  border: 1px solid var(--dm-border-color);
}

/* ==========================================================================
   COMPONENTES ESPECIALES DARK MODE
   ========================================================================== */

/* Ads placeholder */
.dark-mode .ad {
  background: var(--dm-bg-tertiary);
  border: 1px solid var(--dm-border-color);
  border-radius: 8px;
}

/* Scroll to top */
.dark-mode .scroll-to-top {
  background: var(--dm-accent-color);
  box-shadow: var(--dm-shadow);
}

.dark-mode .scroll-to-top:before {
  border-color: white;
}

/* Images y media */
.dark-mode img {
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.dark-mode img:hover {
  opacity: 1;
}

/* ==========================================================================
   RESPONSIVE DARK MODE
   ========================================================================== */

@media (max-width: 768px) {
  .dark-mode .materia-container {
    background: var(--dm-bg-primary);
  }
  
  .dark-mode .main-content,
  .dark-mode .sidebar {
    border: none;
    box-shadow: var(--dm-shadow);
  }
}

/* ==========================================================================
   TRANSITIONS Y ANIMACIONES
   ========================================================================== */

.dark-mode * {
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Reducir animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  .dark-mode * {
    transition: none !important;
    animation: none !important;
  }
}