/* Dark Mode Theme CSS Variables */

:root[data-theme="dark"] {
  /* Page & Background */
  --page-col: #1a1a1a;
  --text-col: #e4e4e4;
  --mid-col: #a0a0a0;
  
  /* Navigation */
  --navbar-col: #252525;
  --navbar-text-col: #e4e4e4;
  --navbar-border-col: #404040;
  
  /* Links & Interactions */
  --link-col: #5ca7ff;
  --hover-col: #7eb8ff;
  
  /* Footer */
  --footer-col: #252525;
  --footer-text-col: #b0b0b0;
  --footer-link-col: #e4e4e4;
  --footer-hover-col: #7eb8ff;
}

/* Light Mode (Default) */
:root[data-theme="light"] {
  --page-col: #ffffff;
  --text-col: #404040;
  --mid-col: #808080;
  --navbar-col: #eaeaea;
  --navbar-text-col: #404040;
  --navbar-border-col: #dddddd;
  --link-col: #008aff;
  --hover-col: #0085a1;
  --footer-col: #eaeaea;
  --footer-text-col: #777777;
  --footer-link-col: #404040;
  --footer-hover-col: #0085a1;
}

/* Dark mode adjustments for specific elements */
:root[data-theme="dark"] {
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* ============ BLOQUES DE CÓDIGO Y RESALTADO DE SINTAXIS (MODO OSCURO) ============ */

/* Código en línea (inline) */
:root[data-theme="dark"] code {
  background-color: #282a36 !important; /* Fondo oscuro para código */
  color: #f1fa8c !important; /* Color amarillo para destacar */
  border-radius: 0.3rem;
  padding: 0.2em 0.4em;
  font-size: 0.85em;
  border: 1px solid #404040;
}

/* Bloques de código completos */
:root[data-theme="dark"] .highlight,
:root[data-theme="dark"] pre {
  background-color: #282a36 !important; /* Fondo estilo Dracula */
  color: #f8f8f2 !important; /* Color de texto general (blanco suave) */
  border: 1px solid #44475a !important;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Evitar doble fondo en elementos anidados */
:root[data-theme="dark"] .highlight pre,
:root[data-theme="dark"] pre code {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: inherit !important; /* Heredar color del contenedor pre */
}

/* Colores para el resaltado de sintaxis (Pygments) en modo oscuro */
:root[data-theme="dark"] .highlight .c,      /* Comment */
:root[data-theme="dark"] .highlight .c1,     /* Comment.Single */
:root[data-theme="dark"] .highlight .cs,     /* Comment.Special */
:root[data-theme="dark"] .highlight .cm {     /* Comment.Multiline */
  color: #6272a4 !important; /* Morado/Gris */
  font-style: italic;
}

:root[data-theme="dark"] .highlight .k,      /* Keyword */
:root[data-theme="dark"] .highlight .kd,     /* Keyword.Declaration */
:root[data-theme="dark"] .highlight .kp,     /* Keyword.Pseudo */
:root[data-theme="dark"] .highlight .kc,     /* Keyword.Constant */
:root[data-theme="dark"] .highlight .kt,     /* Keyword.Type */
:root[data-theme="dark"] .highlight .kn {     /* Keyword.Namespace */
  color: #ff79c6 !important; /* Rosa */
}

:root[data-theme="dark"] .highlight .s,      /* String */
:root[data-theme="dark"] .highlight .s1,     /* String.Single */
:root[data-theme="dark"] .highlight .s2,     /* String.Double */
:root[data-theme="dark"] .highlight .sh,     /* String.Heredoc */
:root[data-theme="dark"] .highlight .sx {     /* String.Other */
  color: #f1fa8c !important; /* Amarillo */
}

:root[data-theme="dark"] .highlight .m,      /* Number */
:root[data-theme="dark"] .highlight .mf,     /* Number.Float */
:root[data-theme="dark"] .highlight .mi,     /* Number.Integer */
:root[data-theme="dark"] .highlight .mo {     /* Number.Oct */
  color: #bd93f9 !important; /* Morado claro */
}

:root[data-theme="dark"] .highlight .na,     /* Name.Attribute */
:root[data-theme="dark"] .highlight .nc,     /* Name.Class */
:root[data-theme="dark"] .highlight .nf,     /* Name.Function */
:root[data-theme="dark"] .highlight .nn {     /* Name.Namespace */
  color: #50fa7b !important; /* Verde */
}

:root[data-theme="dark"] .highlight .o,      /* Operator */
:root[data-theme="dark"] .highlight .ow {     /* Operator.Word */
  color: #ff79c6 !important; /* Rosa */
}

/* Blockquote in dark mode */
:root[data-theme="dark"] blockquote {
  border-left-color: #5ca7ff;
  background-color: #232323;
  padding: 1rem;
  border-radius: 0.25rem;
}

/* Cards and boxes in dark mode */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .post-preview {
  background-color: #252525 !important;
  border-color: #404040 !important;
  color: #e4e4e4 !important;
}

:root[data-theme="dark"] .card:hover {
  background-color: #2d2d2d !important;
}

/* Tables in dark mode */
:root[data-theme="dark"] table {
  background-color: #252525;
  border-color: #404040;
  color: #e4e4e4;
}

:root[data-theme="dark"] table thead {
  background-color: #2d2d2d;
  color: #5ca7ff;
}

:root[data-theme="dark"] table tbody tr:hover {
  background-color: #2d2d2d;
}

/* Fix for striped tables from beautifuljekyll.css */
:root[data-theme="dark"] table tr:nth-child(2n) {
  background-color: #2d2d2d;
}

:root[data-theme="dark"] table tr th,
:root[data-theme="dark"] table tr td {
  border-color: #404040;
}

/* Input & Form elements in dark mode */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background-color: #2d2d2d !important;
  color: #e4e4e4 !important;
  border-color: #404040 !important;
}

:root[data-theme="dark"] input::placeholder {
  color: #808080 !important;
}

/* Pagination in dark mode */
:root[data-theme="dark"] .pagination .page-link {
  background-color: #252525;
  border-color: #404040;
  color: #5ca7ff;
}

:root[data-theme="dark"] .pagination .page-link:hover {
  background-color: #2d2d2d;
  border-color: #5ca7ff;
}

:root[data-theme="dark"] .pagination .active .page-link {
  background-color: #5ca7ff;
  border-color: #5ca7ff;
}

/* Badges & Pills in dark mode */
:root[data-theme="dark"] .badge,
:root[data-theme="dark"] .label {
  background-color: #5ca7ff !important;
  color: #1a1a1a !important;
}

/* Buttons in dark mode */
:root[data-theme="dark"] .btn-light {
  background-color: #2d2d2d;
  border-color: #404040;
  color: #e4e4e4;
}

:root[data-theme="dark"] .btn-light:hover {
  background-color: #404040;
  border-color: #505050;
}

/* Alerts in dark mode */
:root[data-theme="dark"] .alert {
  border-color: #404040;
  background-color: #232323;
  color: #e4e4e4;
}

/* Jumbotron in dark mode */
:root[data-theme="dark"] .jumbotron {
  background-color: #252525;
  color: #e4e4e4;
}

/* HR styling in dark mode */
:root[data-theme="dark"] hr {
  border-color: #404040;
  opacity: 0.5;
}

/* Spinner in dark mode */
:root[data-theme="dark"] .spinner-border {
  border-color: #404040;
  border-right-color: #5ca7ff;
}

/* Image hover overlay */
img {
  transition: filter 0.3s ease;
}

:root[data-theme="dark"] img {
  filter: brightness(0.95);
}

/* Smooth transition between themes */
:root {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Bootstrap dropdown adjustments for dark mode */
:root[data-theme="dark"] .dropdown-menu {
  background-color: #252525 !important;
  border-color: #404040 !important;
}

:root[data-theme="dark"] .dropdown-item {
  color: #e4e4e4 !important;
}

:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus {
  background-color: #2d2d2d !important;
  color: #5ca7ff !important;
}

:root[data-theme="dark"] .dropdown-divider {
  border-color: #404040 !important;
}

/* Tag styling in dark mode */
:root[data-theme="dark"] .tag-list a,
:root[data-theme="dark"] .category-list a {
  background-color: #2d2d2d;
  border-color: #404040;
  color: #5ca7ff;
}

:root[data-theme="dark"] .tag-list a:hover,
:root[data-theme="dark"] .category-list a:hover {
  background-color: #5ca7ff;
  color: #1a1a1a;
  border-color: #5ca7ff;
}

/* Blog tags and categories in dark mode */
:root[data-theme="dark"] .blog-tags a,
:root[data-theme="dark"] .blog-categories a {
  background-color: #2d2d2d !important;
  border-color: #404040 !important;
  color: #5ca7ff !important;
  text-decoration: none;
}

:root[data-theme="dark"] .blog-tags a:hover,
:root[data-theme="dark"] .blog-categories a:hover {
  background-color: #5ca7ff !important;
  border-color: #5ca7ff !important;
  color: #1a1a1a !important;
}

/* Ensure all text content is readable in dark mode */
:root[data-theme="dark"] {
  background-color: var(--page-col);
  color: var(--text-col);
}

:root[data-theme="dark"] body {
  background-color: var(--page-col) !important;
  color: var(--text-col) !important;
}

:root[data-theme="dark"] p,
:root[data-theme="dark"] li,
:root[data-theme="dark"] dt,
:root[data-theme="dark"] dd {
  color: var(--text-col) !important;
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6 {
  color: var(--text-col) !important;
}

:root[data-theme="dark"] .post-title {
  color: var(--text-col) !important;
}

:root[data-theme="dark"] a {
  color: var(--link-col);
}

:root[data-theme="dark"] a:hover {
  color: var(--hover-col);
}

/* Fix for lists and other text elements */
:root[data-theme="dark"] ul,
:root[data-theme="dark"] ol {
  color: var(--text-col) !important;
}

:root[data-theme="dark"] strong,
:root[data-theme="dark"] b {
  color: inherit;
}

:root[data-theme="dark"] em,
:root[data-theme="dark"] i {
  color: inherit;
}

/* Ensure labels and small text are readable */
:root[data-theme="dark"] label,
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] small {
  color: var(--mid-col) !important;
}

/* Post meta information in dark mode */
:root[data-theme="dark"] .post-meta,
:root[data-theme="dark"] .article-metadata {
  color: var(--mid-col) !important;
}

:root[data-theme="dark"] .post-meta a,
:root[data-theme="dark"] .article-metadata a {
  color: var(--link-col) !important;
}

:root[data-theme="dark"] .post-meta a:hover,
:root[data-theme="dark"] .article-metadata a:hover {
  color: var(--hover-col) !important;
}

/* Taxonomy section styling in dark mode (categorías, etiquetas, posts relacionados) */
:root[data-theme="dark"] .taxonomy-section {
  background-color: #2d2d2d !important;
  border-left-color: #5ca7ff !important;
  color: var(--text-col) !important;
}

:root[data-theme="dark"] .taxonomy-section h3,
:root[data-theme="dark"] .taxonomy-section h6 {
  color: var(--text-col) !important;
}

:root[data-theme="dark"] .taxonomy-section h6 a {
  color: var(--link-col) !important;
}

:root[data-theme="dark"] .taxonomy-section h6 a:hover {
  color: var(--hover-col) !important;
}

/* Taxonomy buttons in dark mode */
:root[data-theme="dark"] .taxonomy-btn {
  background-color: #252525;
  border-color: #404040;
  color: var(--link-col);
}

:root[data-theme="dark"] .taxonomy-btn:hover {
  background-color: #5ca7ff;
  border-color: #5ca7ff;
  color: #1a1a1a;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Posts count in dark mode */
:root[data-theme="dark"] .posts-count {
  background-color: #2d2d2d !important;
  border-left-color: #5ca7ff !important;
  color: var(--text-col) !important;
}

/* Taxonomy list in dark mode */
:root[data-theme="dark"] .taxonomy-list .list-group-item {
  background-color: #252525;
  border-color: #404040;
  color: var(--text-col);
}

:root[data-theme="dark"] .taxonomy-list .list-group-item:hover {
  background-color: #2d2d2d;
  border-left-color: #5ca7ff;
}

:root[data-theme="dark"] .taxonomy-date {
  color: var(--mid-col) !important;
}

/* Blog post container styling in dark mode */
:root[data-theme="dark"] .blog-post {
  color: var(--text-col);
}

:root[data-theme="dark"] .blog-post blockquote {
  border-left-color: #5ca7ff;
  background-color: #232323;
}

/* Before and after content in dark mode */
:root[data-theme="dark"] .before-content,
:root[data-theme="dark"] .after-content {
  color: var(--text-col);
}

/* Notification boxes in dark mode */
:root[data-theme="dark"] .box-note,
:root[data-theme="dark"] .box-warning,
:root[data-theme="dark"] .box-error,
:root[data-theme="dark"] .box-success {
  color: var(--text-col);
  border-color: #404040;
}
:root[data-theme="dark"] .box-note {
  background-color: rgba(41, 128, 185, 0.15);
  border-left-color: #2980b9;
}
:root[data-theme="dark"] .box-warning {
  background-color: rgba(241, 196, 15, 0.15);
  border-left-color: #f1c40f;
}
:root[data-theme="dark"] .box-error {
  background-color: rgba(192, 57, 43, 0.15);
  border-left-color: #c0392b;
}
:root[data-theme="dark"] .box-success {
  background-color: rgba(60, 179, 113, 0.15);
  border-left-color: #3CB371;
}

/* Staticman comments in dark mode */
:root[data-theme="dark"] .staticman-comments form {
  background-color: #252525;
}
:root[data-theme="dark"] .staticman-comments label {
  color: var(--text-col);
}
:root[data-theme="dark"] .staticman-comments input,
:root[data-theme="dark"] .staticman-comments textarea {
  background-color: #2d2d2d;
  color: var(--text-col);
  border-color: #404040;
}
:root[data-theme="dark"] .staticman-comments .comment:not(:last-child) {
  border-bottom-color: #404040;
}

/* Cookie consent modal in dark mode */
:root[data-theme="dark"] #cookie-modal {
  background: #2c3e50;
  color: white;
}
:root[data-theme="dark"] .cookie-options label {
  background: rgba(255,255,255,0.1);
}
:root[data-theme="dark"] .cookie-options label:hover {
  background: rgba(255,255,255,0.2);
}
:root[data-theme="dark"] .eea-notice {
  background: rgba(0,0,0,0.2);
}

/* Copy code button in dark mode */
:root[data-theme="dark"] .copy-code-button {
  background-color: #44475a;
  color: #f8f8f2;
  border-color: #6272a4;
}

:root[data-theme="dark"] .copy-code-button:hover {
  background-color: #6272a4;
}

:root[data-theme="dark"] .copy-code-button.copied {
  background-color: #50fa7b;
  color: #282a36;
  border-color: #50fa7b;
}