/*
 Theme Name:  cecihacks
 Theme URI:   https://cecihacks.com
 Description: Child theme for ceciHacks based on GeneratePress.
 Author:      Cecilio
 Template:    generatepress
 Version:     1.0
*/

/* IMPORTANTE: el CSS propio va debajo */

/*** Inicio tema claro/oscuro ***/
/* ============================================
   APLICAR ESTILOS DEL TEMA - VERSIÓN FUERTE
   ============================================ */

/* Body y elementos principales */
html[data-theme="light"] body,
body {
  background-color: #ffffff !important;
  color: #333333 !important;
  //transition: background-color 0.3s ease, color 0.3s ease;
}

html[data-theme="dark"] body {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
}

/* HEADER - Modo claro */
html[data-theme="light"] .site-header,
html[data-theme="light"] .inside-header,
.site-header,
.inside-header {
  background-color: #000 !important;
  color: #fff !important;
}

/* HEADER - Modo oscuro */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .inside-header {
  background-color: #000 !important;
  color: #fff !important;
}

/* Navegación - Modo oscuro */
html[data-theme="dark"] .main-navigation,
html[data-theme="dark"] .main-navigation .main-nav ul li a,
html[data-theme="dark"] .main-navigation .menu-toggle {
  background-color: #2d2d2d !important;
  color: #e0e0e0 !important;
}

/* Footer - Modo oscuro */
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .site-info,
html[data-theme="dark"] .footer-widgets {
  background-color: #2d2d2d !important;
  color: #e0e0e0 !important;
}

/* Contenido - Modo oscuro */
html[data-theme="dark"] .entry-content,
html[data-theme="dark"] .widget,
html[data-theme="dark"] article,
html[data-theme="dark"] .sidebar .widget,
html[data-theme="dark"] .inside-article,
html[data-theme="dark"] .site-content {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
  border-color: #404040 !important;
}

/* Enlaces - Modo oscuro */
html[data-theme="dark"] a {
  color: #1BA7A0 !important;
}

html[data-theme="dark"] a:hover {
  color: #ffffff !important;
}

/* Formularios - Modo oscuro */
html[data-theme="dark"] input:not([type="submit"]):not(.theme-toggle-btn),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: #2d2d2d !important;
  color: #e0e0e0 !important;
  border-color: #404040 !important;
}

/* Botones generales - Modo oscuro (EXCLUIR theme-toggle-btn) */
html[data-theme="dark"] .button:not(.theme-toggle-btn),
html[data-theme="dark"] button:not(.theme-toggle-btn):not(#theme-toggle),
html[data-theme="dark"] input[type="submit"] {
  background-color: #2d2d2d !important;
  color: #e0e0e0 !important;
  border-color: #404040 !important;
}

/* Títulos - Modo oscuro */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: #e0e0e0 !important;
}

/* Párrafos y texto - Modo oscuro */
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] span:not(.theme-toggle-icon) {
  color: #e0e0e0 !important;
}

/* Contenedor principal - Modo oscuro */
html[data-theme="dark"] .site,
html[data-theme="dark"] #page {
  background-color: #1a1a1a !important;
}
/*** Fin tema claro/oscuro ***/