/* MODO OSCURO AUTOMÁTICO PARA MÓVIL Y TABLET */
@media (prefers-color-scheme: dark) {

  body {
    background-color: #000000;
    color: #ffffff;
  }

  a {
    color: #a8d8ff;
  }

  header,
  footer,
  .site-footer,
  .site-header {
    background-color: #000000;
  }

  .card,
  .post,
  .entry-content,
  .sermon-block,
  .wp-block-group {
    color: #eeeeee;
  }

  h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
  }

  /* Botones */
  button,
  .wp-block-button__link {
    background-color: #333;
    color: #fff;
    border-color: #555;
  }

  /* Opcional: bordes o sombras más suaves */
  .card,
  .post {
    border-color: #333;
    box-shadow: none;
  }

  /* Ajustes para formularios si los tienes */
  input,
  textarea,
  select {
    background-color: #222;
    color: #fff;
    border-color: #444;
  }

}

@media (prefers-color-scheme: dark) {
  .header5 .top-header {
    background-color: #1a1a1a !important;
  }
}



@media (prefers-color-scheme: dark) {

  /* ... (sus estilos anteriores) ... */

  /* HEADER */
  header,
  .site-header,
  .navbar,
  .main-header,
  .site-branding {
    background-color: #1a1a1a !important;
    color: #ffffff;
  }

  /* LOGO */
  .site-logo img,
  .custom-logo {
    filter: brightness(0) invert(1); /* Invierte logo claro en fondo oscuro */
  }

  /* MENÚ PRINCIPAL */
  .main-navigation,
  .mobile-menu,
  .mobile-nav,
  .menu,
  .menu-container {
    background-color: #1a1a1a !important;
  }

  /* ENLACES DEL MENÚ */
  .main-navigation a,
  .menu a,
  .mobile-menu a {
    color: #ffffff !important;
  }

  /* BOTÓN DE HAMBURGUESA (si tiene uno) */
  .menu-toggle,
  .mobile-toggle,
  .menu-icon,
  .hamburger {
    background-color: transparent;
    color: #ffffff;
  }

}

@media (prefers-color-scheme: dark) {

  /* Forzar color claro en contenido */
  body,
  .entry-content,
  .wp-block-paragraph,
  .wp-block-heading,
  .wp-block-group,
  .sermon-content,
  .page-content,
  .post-content,
  .content-area,
  p,
  li,
  span,
  h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
  }

  /* También enlaces dentro de esos bloques */
  .entry-content a,
  .wp-block-paragraph a,
  .wp-block-group a,
  a {
    color: #cc9966 !important;
  }

}


@media (prefers-color-scheme: dark) {

  .pagination,
  .nav-links,
  .page-numbers,
  .wp-block-query-pagination {
    background-color: #000000 !important;
    color: #ffffff !important;
  }

  .pagination a,
  .page-numbers a,
  .nav-links a {
    color: #a8d8ff !important;
  }

  .pagination .current,
  .page-numbers.current {
    background-color: #333333 !important;
    color: #ffffff !important;
  }

}

@media (prefers-color-scheme: dark) {

  /* Fondo oscuro para el contenedor principal */
  .header-title-breadcrumb,
  .header-title-breadcrumb-overlay {
    background-color: #000000 !important;
    color: #ffffff !important;
  }

  /* Color de texto dentro del título y breadcrumb */
  .header-title-breadcrumb h1,
  .header-title-breadcrumb h1 span,
  .header-title-breadcrumb .breadcrumb,
  .header-title-breadcrumb .breadcrumb a {
    color: #996633 !important;
  }

  /* Si hay enlaces en el breadcrumb, se puede dar un color azul claro */
  .header-title-breadcrumb .breadcrumb a {
    color: #a8d8ff !important;
  }



}

@media (prefers-color-scheme: dark) {

  /* Fondo oscuro para el header completo */
  .header5,
  .top-header {
    background-color: #000000 !important;
    color: #ffffff !important;
  }

  /* Color blanco para textos e íconos */
  .top-header a,
  .top-header label,
  .top-header i,
  .top-header svg,
  .top-header input,
  .top-header .search-submit {
    color: #ffffff !important;
    fill: #ffffff !important;
  }

  /* Ajuste del campo de búsqueda */
  .top-header .search-field {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
  }

  .top-header .search-submit {
    background-color: #333 !important;
  }

}

@media (prefers-color-scheme: dark) {

  /* Fondo oscuro para el nav principal */
  nav.logo-centered-holder {
    background-color: #000000 !important;
  }

  /* Botón hamburguesa (background transparente, barras blancas) */
  .navbar-toggle {
    background-color: transparent !important;
    border: 1px solid #fff !important;
  }

  /* Las barras del botón hamburguesa */
  .navbar-toggle .icon-bar {
    background-color: #fff !important;
  }

  /* Ajuste del logo - si no tiene logo alternativo, puede invertirse con filter (si aplica) */
  .logo-sitio {
    /* Si quiere intentar invertir el logo, descomente esta línea */
    /* filter: brightness(0) invert(1); */
  }

}

@media (prefers-color-scheme: dark) {

  /* Fondo oscuro y texto claro en el footer */
  .footer,
  .footer .container,
  .footer .row,
  .footer .copyright {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
  }

  /* Ajustar color de textos y etiquetas fuertes */
  .footer p,
  .footer strong {
    color: #ffffff !important;
  }

  /* Imagen: si se usa una versión blanca del logo, está bien.
     Si la imagen blanca no se ve (en fondo blanco), entonces ya está correcta. */
  .footer img {
    /* Si más adelante cambia a un logo oscuro, se puede invertir aquí */
    /* filter: brightness(0) invert(1); */
  }

}
@media (prefers-color-scheme: dark) {

  /* Fondo y borde de cada tarjeta de serie */
  .tslr-sermon-serie {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
    color: #ffffff !important;
  }

  /* Título de la serie */
  .tslr-sermon-serie .serie-title {
    color: #ffffff !important;
  }

  /* Descripción */
  .tslr-sermon-serie .serie-description {
    color: #dddddd !important;
  }

  /* Enlaces (si el título es clicable) */
  .tslr-sermon-serie a {
    color: #a8d8ff !important;
  }

}

@media (prefers-color-scheme: dark) {

  /* Tarjetas de series */
  .series-grid .serie-card {
    background-color: #1c1c1c !important;
    color: #ffffff !important;
    border: 1px solid #333 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
    border-radius: 8px !important;
  }

  /* Contenido interno de la tarjeta */
  .serie-card-content {
    background-color: #1c1c1c !important;
    color: #ffffff !important;
  }

  .serie-card-title {
    color: #996633 !important;
    font-weight: bold;
  }

  .serie-card-description {
    color: #dddddd !important;
  }

  .serie-card-count {
    color: #bbbbbb !important;
  }

  /* Imagen: mantener sin cambios (ajustar si desea filtro) */
  .serie-card img {
    filter: brightness(0.95);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

}

@media (prefers-color-scheme: dark) {

  /* Estilos para todos los SELECT visibles en modo oscuro */
  select,
  .combo-libro,
  .combo-capitulo,
  .series-dropdown,
  .ordenar-sermones {
    background-color: #1c1c1c !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
  }

  /* Opciones dentro del select */
  select option {
    background-color: #1c1c1c !important;
    color: #ffffff !important;
  }

}

@media (prefers-color-scheme: dark) {

  /* Contenedor principal inferior */
  .post-details-bottom {
    background-color: #000000 !important;
    color: #ffffff !important;
    padding-top: 20px;
  }

  /* Título de sección */
  .post-details-bottom .heading-bottom {
    color: #ffffff !important;
    border-bottom: 1px solid #444;
    padding-bottom: 8px;
  }

  /* Tarjetas de sermones relacionados */
  .related-posts .single-post,
  .related_blog_custom {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border: 1px solid #333 !important;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    padding: 10px;
    margin-bottom: 20px;
  }

  .related_blog_custom h2,
  .related_blog_custom h3,
  .related_blog_custom p {
    color: #ffffff !important;
  }

  /* Ajuste imágenes si están dentro de related_blog_custom */
  .related_blog_custom img {
    border-radius: 4px;
    filter: brightness(0.95);
  }

}

@media (prefers-color-scheme: dark) {

  /* Contenido principal de artículos y sermones */
  .entry-content,
  .post-content,
  .page-content,
  .sermon-content,
  .single-sermon,
  .wp-block-post-content {
    color: #ffffff !important;
  }

  /* Títulos y subtítulos */
  .entry-content h1,
  .entry-content h2,
  .entry-content h3,
  .entry-content h4,
  .entry-content h5,
  .entry-content h6,
  .post-content h2,
  .sermon-content h3 {
    color: #996633 !important;
  }

  /* Párrafos y listas */
  .entry-content p,
  .entry-content li,
  .entry-content span,
  .post-content p,
  .sermon-content li {
    color: #dddddd !important;
  }

  /* Enlaces */
  .entry-content a,
  .post-content a,
  .sermon-content a {
    color: #a8d8ff !important;
  }

  .entry-content a:hover,
  .post-content a:hover,
  .sermon-content a:hover {
    color: #cc9966 !important;
    text-decoration: underline;
  }

  /* Bloques de Gutenberg si aplica */
  .wp-block-paragraph,
  .wp-block-heading {
    color: #996633 !important;
  }

}

@media (prefers-color-scheme: dark) {

  /* Contenedor general del contenido principal (ajustar si aplica) */
  .col-md-8 {
    background-color: #1c1c1c !important;
    color: #ffffff !important;
  }

  /* Título del post */
  .col-md-8 h3.post-name {
    color: #ffffff !important;
  }

  /* Metadatos del post */
  .churchwp-single-post-meta,
  .churchwp-single-post-meta a,
  .churchwp-single-post-meta span {
    color: #cccccc !important;
  }

  .churchwp-single-post-meta a:hover,
  .churchwp-single-post-meta a:focus {
    color: #a8d8ff !important;
    text-decoration: underline;
  }

  /* Párrafos */
  .col-md-8 p {
    color: #dddddd !important;
  }

  /* Edit link (solo si quiere mostrarlo) */
  .edit-post a {
    color: #a8d8ff !important;
  }

  .edit-post a:hover {
    color: #78aadd !important;
  }

}

@media (prefers-color-scheme: dark) {

  /* Contenedor específico para forzar color y fondo */
  div.col-md-8 {
    background-color: #1c1c1c !important;
  }

  div.col-md-8 > h3.post-name {
    color: #996633 !important;
  }

  div.col-md-8 > p,
  div.col-md-8 > .churchwp-single-post-meta,
  div.col-md-8 > .churchwp-single-post-meta span {
    color: #ffffff !important;
  }

  div.col-md-8 > .churchwp-single-post-meta a {
    color: #cc9966 !important;
  }

  .churchwp-single-post-meta a:hover,
  .churchwp-single-post-meta a:focus {
    color: #cc9966 !important;
    text-decoration: underline !important;
  }

}


@media (prefers-color-scheme: dark) {

  /* Forzar fondo oscuro y texto blanco para todos los párrafos dentro de main, article o div contenedor */
  main p,
  article p,
  .entry-content p,
  .post-content p,
  .sermon-content p,
  .content-area p,
  .post p,
  .single-post p,
  .single-sermon p {
    color: #e0e0e0 !important;
    background-color: transparent !important; /* No sobreponer fondo */
  }

  /* También forzar color del texto para todos los elementos comunes de contenido */
  main,
  article,
  .entry-content,
  .post-content,
  .sermon-content,
  .content-area,
  .post,
  .single-post,
  .single-sermon {
    color: #e0e0e0 !important;
  }

}

@media (prefers-color-scheme: dark) {

  /* Fondo oscuro para contenedor de artículos */
  div.article-content {
    color: #e0e0e0 !important;
  }

  /* Texto claro para todos los párrafos dentro de artículo */
  div.article-content p {
    color: #e0e0e0 !important;
    background-color: transparent !important;
  }

  /* Fondo oscuro para contenedor principal de sermones */
  div.col-md-8 {
    background-color: #000000 !important;
    color: #e0e0e0 !important;
  }

  /* Texto claro para todos los párrafos dentro de sermones */
  div.col-md-8 p {
    color: #e0e0e0 !important;
    background-color: transparent !important;
  }

  /* Enlaces en ambos contenedores */
  div.article-content a,
  div.col-md-8 a {
    color: #a8d8ff !important;
  }

  div.article-content a:hover,
  div.col-md-8 a:hover {
    color: #78aadd !important;
    text-decoration: underline !important;
  }
}

@media (prefers-color-scheme: dark) {

  /* Contenedor general y fondo */
  div.col-md-8, div.article-content {
    color: #e0e0e0 !important;
  }

  /* Párrafos */
  div.col-md-8 p, div.article-content p {
    color: #e0e0e0 !important;
    background-color: transparent !important;
  }

  /* Enlaces */
  div.col-md-8 a, div.article-content a {
    color: #a8d8ff !important;
  }

  div.col-md-8 a:hover, div.article-content a:hover {
    color: #78aadd !important;
    text-decoration: underline !important;
  }

  /* Encabezados dentro de esos contenedores */
  div.col-md-8 h1, div.col-md-8 h2, div.col-md-8 h3, div.col-md-8 h4,
  div.article-content h1, div.article-content h2, div.article-content h3, div.article-content h4 {
    color: #996633 !important;
  }

}

@media (prefers-color-scheme: dark) {

  /* Forzar color en párrafos dentro del artículo en modo oscuro */
  body.single article .article-content p {
    color: #e0e0e0 !important;
    background-color: transparent !important;
  }

  /* Lo mismo para la sección de sermones (col-md-8 está dentro del article) */
  body.single article div.col-md-8 p {
    color: #e0e0e0 !important;
    background-color: transparent !important;
  }

}

@media (prefers-color-scheme: dark) {
  .logo-container img.logo-sitio {
    display: none !important;
  }
  .logo-container {
    display: inline-block;
    width: 180px;  /* ajuste según tamaño real del logo */
    height: 60px;  /* ajuste según tamaño real del logo */
    background-image: url('/wp-content/uploads/2022/12/logoWeb-tufortaleza2022-oscuro.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}


@media (prefers-color-scheme: dark) {

  /* Enlaces normales */
  a,
  .entry-content a,
  .wp-block-paragraph a,
  .wp-block-group a,
  .post-content a,
  .sermon-content a,
  .churchwp-single-post-meta a,
  .edit-post a,
  div.article-content a,
  div.col-md-8 a,
  .tslr-sermon-serie a {
    color: #cc9966 !important;
  }

  /* Enlaces al pasar el mouse (hover) */
  a:hover,
  .entry-content a:hover,
  .post-content a:hover,
  .sermon-content a:hover,
  .churchwp-single-post-meta a:hover,
  .churchwp-single-post-meta a:focus,
  .edit-post a:hover,
  div.article-content a:hover,
  div.col-md-8 a:hover,
  .pagination a:hover,
  .page-numbers a:hover,
  .nav-links a:hover {
    color: #cc9966 !important;
    text-decoration: underline !important;
  }

  /* Enlaces de breadcrumb (título secciones) */
  .header-title-breadcrumb .breadcrumb a {
    color: #cc9966 !important;
  }

}

@media (prefers-color-scheme: dark) {

  /* Enlaces del menú principal con color institucional */
  .main-navigation a,
  .menu a,
  .mobile-menu a {
    color: #cc9966 !important;
  }
  
  .main-navigation a:hover,
  .menu a:hover,
  .mobile-menu a:hover {
    color: #cc9966 !important;
    text-decoration: underline;
  }

  /* Enlaces de paginación con color institucional */
  .pagination a,
  .page-numbers a,
  .nav-links a {
    color: #cc9966 !important;
  }

  .pagination a:hover,
  .page-numbers a:hover,
  .nav-links a:hover {
    color: #cc9966 !important;
    text-decoration: underline;
  }

  /* Para el número de página activo, si quiere que también sea color institucional */
  .pagination .current,
  .page-numbers.current {
    background-color: transparent !important;
    color: #cc9966 !important;
  }

}



@media (prefers-color-scheme: dark) {
  .logo-container img.logo-sitio {
    display: none !important;
  }

  .logo-container {
    display: inline-block;
    background-image: url('/wp-content/uploads/2022/12/logoWeb-tufortaleza2022-oscuro.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  /* Móviles pequeños */
  @media (max-width: 599px) {
    .logo-container {
      width: 250px !important;
      height: 60px !important;
    }
  }

  /* Tablets en vertical */
  @media (min-width: 600px) and (max-width: 767px) {
    .logo-container {
      width: 300px !important;
      height: 75px !important;
    }
  }

  /* Tablets en horizontal y pantallas medianas */
  @media (min-width: 768px) and (max-width: 1200px) {
    .logo-container {
      width: 400px !important;
      height: 90px !important;
    }
  }

  /* Escritorio y pantallas grandes */
  @media (min-width: 1201px) {
    .logo-container {
      width: 450px !important;
      height: 100px !important;
    }
  }
}


@media (prefers-color-scheme: dark) {
  /* Botón hamburguesa */
  .menu-toggle,
  .mobile-toggle,
  .menu-icon,
  .hamburger {
    background-color: transparent !important;
    color: #cc9966 !important;
    border: 1px solid #cc9966 !important;
    padding: 10px;
    border-radius: 4px;
  }

  .menu-toggle:hover,
  .menu-icon:hover {
    background-color: #2a2a2a !important;
  }

  /* Líneas del ícono hamburguesa (si usa barras) */
  .menu-toggle .icon-bar,
  .hamburger .bar {
    background-color: #cc9966 !important;
  }

  /* Contenedor del menú desplegable */
  .mobile-menu,
  .mobile-nav,
  .menu-container {
    background-color: #1c1c1c !important;
    border-top: 1px solid #333 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    padding: 10px 0;
  }

  /* Enlaces del menú */
  .mobile-menu a,
  .mobile-nav a,
  .menu a {
    display: block;
    color: #ffffff !important;
    padding: 12px 20px;
    font-size: 16px;
    transition: background-color 0.2s, color 0.2s;
  }

  /* Hover o activo */
  
.mobile-menu .current-menu-item > a {
  background-color: #2a2a2a !important;
  color: #cc9966 !important;
  border: none !important;
  text-decoration: none !important;
  display: block;
}

.menu .current-menu-item > a {
  background-color: #2a2a2a !important;
  color: #cc9966 !important;
  border: none !important;
  text-decoration: none !important;
  display: block;
}


  /* Íconos dentro del menú (si aplica) */
  .mobile-menu i,
  .menu a i {
    color: #cc9966 !important;
    margin-right: 8px;
  }
}

@media (prefers-color-scheme: dark) {
  blockquote {
    background-color: #1e1e1e !important;
    color: #dddddd !important;
    border-left: 4px solid #cc9966 !important;
    padding: 16px 20px;
    margin: 20px 0;
    font-style: italic;
  }

  blockquote p {
    color: #dddddd !important;
    margin: 0;
  }

  blockquote cite {
    display: block;
    margin-top: 10px;
    color: #bbbbbb !important;
    font-size: 90%;
    text-align: right;
  }
}