/* ===== MODO OSCURO PERSONALIZADO PARA MEDIOPIXEL ===== */

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #4a9eff;      /* Azul más claro para modo oscuro */
    --primary-hover: #66b3ff;     /* Azul aún más claro para hover */
    --accent-color: #ff6b6b;      /* Rojo más suave */
    --text-color: #e1e8ed;        /* Texto claro */
    --text-light: #8899a6;        /* Texto secundario */
    --background: #15202b;         /* Fondo oscuro */
    --background-alt: #1a2632;     /* Fondo alternativo oscuro */
    --border-color: #2c3e50;      /* Bordes oscuros */
  }

  /* Fondo general */
  body {
    background-color: var(--background) !important;
    color: var(--text-color) !important;
  }

  /* Header en modo oscuro */
  .site-header {
    background-color: var(--background) !important;
    border-bottom: 2px solid var(--primary-color);
  }

  /* Navegación en modo oscuro */
  .site-navi-items a:hover {
    background-color: var(--primary-color) !important;
    color: var(--background) !important;
  }

  /* Código en modo oscuro */
  pre, code {
    background-color: var(--background-alt) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color);
  }

  /* Blockquotes en modo oscuro */
  blockquote {
    background-color: var(--background-alt) !important;
    color: var(--text-light) !important;
    border-left: 4px solid var(--primary-color) !important;
  }

  /* Autor en modo oscuro */
  .author {
    background-color: var(--background-alt) !important;
    border-left: 4px solid var(--primary-color);
  }

  /* Paginación en modo oscuro */
  .pagination a {
    background-color: var(--background-alt) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
  }

  .pagination a:hover {
    background-color: var(--primary-color) !important;
    color: var(--background) !important;
  }

  .pagination li.active a {
    background-color: var(--primary-color) !important;
    color: var(--background) !important;
  }

  /* Tags y categorías en modo oscuro */
  .article-meta-categories a,
  .article-meta-tags a {
    background-color: var(--background-alt) !important;
    color: var(--text-color) !important;
  }

  .article-meta-categories a:hover,
  .article-meta-tags a:hover {
    background-color: var(--primary-color) !important;
    color: var(--background) !important;
  }
}