/*
 * VOZCARIBE - Modo oscuro automatico
 * Se activa unicamente cuando el sistema del visitante prefiere colores oscuros.
 */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --vc-dark-bg: #0d0f12;
    --vc-dark-surface: #15181d;
    --vc-dark-surface-2: #1c2026;
    --vc-dark-border: #30353d;
    --vc-dark-text: #f2f4f7;
    --vc-dark-muted: #b5bbc4;
    --vc-dark-accent: #f04a48;
    --vc-dark-link: #ff716d;
  }

  html,
  body {
    background: var(--vc-dark-bg) !important;
    color: var(--vc-dark-text) !important;
  }

  body,
  body p,
  body li,
  body label,
  body figcaption,
  body .td-post-content,
  body .tdb_single_content,
  body .td-excerpt,
  body .td-module-meta-info {
    color: var(--vc-dark-text);
  }

  /*
   * Fuerza el contraste del texto editorial frente a los selectores compilados
   * de Newspaper/tagDiv, incluidos parrafos con estilos o clases heredadas.
   */
  body .td-post-content,
  body .td-post-content p,
  body .td-post-content li,
  body .tdb_single_content,
  body .tdb_single_content p,
  body .tdb_single_content li,
  body .tdb_single_content .wp-block-paragraph,
  body .tdb_single_content .has-text-color:not(.has-background),
  body .entry-content,
  body .entry-content p,
  body .entry-content li {
    color: var(--vc-dark-text) !important;
  }

  body .td-page-wrap,
  body .td-main-content-wrap,
  body .td-container-wrap,
  body .tdc-content-wrap,
  body .tdb-template,
  body .td-ss-main-content,
  body .td-pb-row,
  body .td_block_wrap,
  body .td_block_inner,
  body article {
    background-color: var(--vc-dark-bg) !important;
  }

  body .td-module-container,
  body .td-category-grid,
  body .td-author-page,
  body .author-box-wrap,
  body .td-post-sharing-bottom,
  body .td-post-next-prev-content,
  body .td-related-row,
  body .td-comments-wrap,
  body .comment {
    background-color: var(--vc-dark-surface) !important;
    border-color: var(--vc-dark-border) !important;
  }

  body .td-header-wrap,
  body .td-header-template-wrap,
  body .tdc-header-wrap,
  body .td-header-menu-wrap,
  body .td-header-main-menu,
  body .td-menu-background,
  body .tdb-header-menu,
  body .tdb-mobile-menu-button {
    background-color: #111318 !important;
    border-color: var(--vc-dark-border) !important;
  }

  body .tdb_header_menu .tdb-menu > li > a,
  body .td-header-menu-wrap a,
  body .td-main-menu-logo a,
  body .tdb-mobile-menu-button i,
  body .tdb-head-search-btn i {
    color: var(--vc-dark-text) !important;
  }

  /*
   * Usa la variante invertida solo en modo oscuro. El archivo claro original
   * permanece intacto y sigue sirviendose en modo claro.
   */
  body img.tdb-logo-img[src*="logo-transp.png"] {
    content: url("vozcaribe-logo-dark.png");
  }

  body .tdb-logo-a,
  body .td-main-logo,
  body .tdb-logo-img-wrap {
    background: transparent !important;
  }

  body h1,
  body h2,
  body h3,
  body h4,
  body h5,
  body h6,
  body .entry-title,
  body .td-post-title,
  body .tdb-title-text,
  body .td-module-title,
  body .td-module-title a,
  body .td-post-author-name a,
  body .td-author-name a {
    color: var(--vc-dark-text) !important;
  }

  body a {
    color: var(--vc-dark-link);
  }

  body a:hover,
  body a:focus {
    color: var(--vc-dark-accent);
  }

  body .td-post-date,
  body .entry-date,
  body .td-module-date,
  body .td-post-views,
  body .td-post-comments,
  body .tdb-author-by,
  body .tdb-minute-text,
  body .tdb-add-text,
  body .td-category,
  body .td-post-source-tags,
  body .wp-caption-text {
    color: var(--vc-dark-muted) !important;
  }

  body hr,
  body .td-block-title-wrap,
  body .td-post-header,
  body .td-post-content,
  body .td-post-next-prev,
  body .td-module-container,
  body .td-block-row,
  body .tdb-block-inner,
  body .td-comments-title-wrap,
  body .comment-list,
  body table,
  body th,
  body td {
    border-color: var(--vc-dark-border) !important;
  }

  body input,
  body textarea,
  body select,
  body .td-search-input {
    background: var(--vc-dark-surface-2) !important;
    border-color: var(--vc-dark-border) !important;
    color: var(--vc-dark-text) !important;
  }

  body input::placeholder,
  body textarea::placeholder {
    color: #8f96a0 !important;
  }

  body blockquote {
    background: var(--vc-dark-surface) !important;
    border-color: var(--vc-dark-accent) !important;
    color: var(--vc-dark-text) !important;
  }

  body table,
  body th,
  body td {
    background-color: var(--vc-dark-surface) !important;
    color: var(--vc-dark-text) !important;
  }

  /* Tarjetas anterior/siguiente: elimina el fondo claro heredado del tema. */
  html body .tdb_single_next_prev .tdb-next-post-bg,
  html body .tdb_single_next_prev .tdb-post-prev,
  html body .tdb_single_next_prev .tdb-post-next,
  html body .tdb_single_next_prev .tdb-next-post {
    background-color: var(--vc-dark-surface-2) !important;
    border-color: var(--vc-dark-border) !important;
  }

  html body .tdb_single_next_prev .tdb-next-post-bg > span,
  html body .tdb_single_next_prev .tdb-post-prev > span,
  html body .tdb_single_next_prev .tdb-post-next > span {
    color: var(--vc-dark-text) !important;
  }

  /* Contraste de navegación, autor y comentarios al final de las noticias. */
  html body .tdb_single_next_prev,
  html body .tdb_single_next_prev *,
  html body .tdb_single_author_box,
  html body .tdb_single_author_box *,
  html body .tdb_single_comments,
  html body .tdb_single_comments *,
  html body .comment-respond,
  html body .comment-respond * {
    color: var(--vc-dark-text) !important;
    border-color: var(--vc-dark-border) !important;
  }

  html body .tdb_single_next_prev a,
  html body .tdb_single_author_box a,
  html body .tdb_single_comments a,
  html body .comment-respond a {
    color: var(--vc-dark-text) !important;
  }

  html body .tdb_single_next_prev a:hover,
  html body .tdb_single_next_prev a:focus,
  html body .tdb_single_author_box a:hover,
  html body .tdb_single_author_box a:focus,
  html body .tdb_single_comments a:hover,
  html body .tdb_single_comments a:focus {
    color: var(--vc-dark-link) !important;
  }

  html body .tdb_single_author_box,
  html body .tdb_single_comments,
  html body .comment-respond {
    background-color: var(--vc-dark-surface) !important;
  }

  body .td_ajax_load_more,
  body .page-nav a,
  body .page-nav span,
  body .td-next-prev-wrap a {
    background: var(--vc-dark-surface-2) !important;
    border-color: var(--vc-dark-border) !important;
    color: var(--vc-dark-text) !important;
  }

  body .td-footer-wrapper,
  body .td-sub-footer-container,
  body .tdc-footer-wrap,
  body footer {
    background-color: #090a0c !important;
    border-color: var(--vc-dark-border) !important;
    color: var(--vc-dark-muted) !important;
  }

  body .vc-sections-panel {
    background: var(--vc-dark-surface) !important;
    color: var(--vc-dark-text) !important;
  }

  body .vc-sections-close,
  body .vc-sections-group a {
    color: var(--vc-dark-text) !important;
  }

  body .vc-sections-header p {
    color: var(--vc-dark-muted) !important;
  }

  body .vc-sections-group li,
  body .vc-sections-footer {
    border-color: var(--vc-dark-border) !important;
  }

  body .vc-sections-group a:hover,
  body .vc-sections-group a:focus {
    color: var(--vc-dark-link) !important;
  }

  body img,
  body video,
  body iframe {
    filter: none !important;
  }

  /*
   * Extiende el fondo del footer mas alla del ancho maximo de Newspaper para
   * cubrir los laterales en pantallas amplias.
   */
  /*
   * En el diseno de ancho limitado, los bordes exteriores pertenecen al
   * fondo raiz y no al footer. Esta regla cubre ese espacio en pantallas
   * amplias con prioridad sobre los estilos compilados de Newspaper.
   */
  html,
  html body.td-full-layout,
  html body.tdc-footer-template,
  html body.tdc-header-template,
  html body.td-full-layout #td-outer-wrap,
  html body.td-full-layout .td-theme-wrap,
  body .td-footer-template-wrap,
  body .td-footer-wrap {
    background-color: #090a0c !important;
    background-image: none !important;
  }

  /*
   * Neutraliza las capas de fondo de tagDiv dentro del footer. La plantilla
   * heredaba una imagen de /dev2/ y dejaba una franja clara en la cuadricula,
   * especialmente visible en pantallas pequenas.
   */
  body .td-footer-template-wrap .tdc-zone,
  body .td-footer-template-wrap .tdc_zone,
  body .td-footer-template-wrap .tdc-row,
  body .td-footer-template-wrap .tdc-element-style,
  body .td-footer-template-wrap .td-element-style,
  body .td-footer-template-wrap .td-element-style-before,
  body .td-footer-template-wrap .vc_row,
  body .td-footer-template-wrap .wpb_row,
  body .td-footer-template-wrap .td-pb-row,
  body .td-footer-template-wrap .vc_column_container,
  body .td-footer-template-wrap .vc_column-inner,
  body .td-footer-template-wrap .wpb_wrapper {
    background-color: #090a0c !important;
  }

  body .td-footer-template-wrap,
  body .td-footer-template-wrap div,
  body .td-footer-template-wrap section,
  body .td-footer-template-wrap footer {
    background-color: #090a0c !important;
  }

  body .td-footer-template-wrap .td-element-style,
  body .td-footer-template-wrap .td-element-style-before,
  body .td-footer-template-wrap .td-element-style::before,
  body .td-footer-template-wrap .td-element-style::after {
    background-image: none !important;
    background: #090a0c !important;
  }

  /* Contraste completo de textos y enlaces dentro del footer oscuro. */
  html body .td-footer-template-wrap,
  html body .td-footer-template-wrap h1,
  html body .td-footer-template-wrap h2,
  html body .td-footer-template-wrap h3,
  html body .td-footer-template-wrap h4,
  html body .td-footer-template-wrap h5,
  html body .td-footer-template-wrap h6,
  html body .td-footer-template-wrap p,
  html body .td-footer-template-wrap li,
  html body .td-footer-template-wrap span,
  html body .td-footer-template-wrap label,
  html body .td-footer-wrap,
  html body .td-footer-wrap p,
  html body .td-footer-wrap li,
  html body .td-footer-wrap span {
    color: var(--vc-dark-muted) !important;
  }

  html body .td-footer-template-wrap h1,
  html body .td-footer-template-wrap h2,
  html body .td-footer-template-wrap h3,
  html body .td-footer-template-wrap h4,
  html body .td-footer-template-wrap h5,
  html body .td-footer-template-wrap h6,
  html body .td-footer-template-wrap .td-module-title,
  html body .td-footer-template-wrap .td-block-title,
  html body .td-footer-template-wrap .tdm-title {
    color: var(--vc-dark-text) !important;
  }

  html body .td-footer-template-wrap a,
  html body .td-footer-template-wrap .td-module-title a,
  html body .td-footer-wrap a {
    color: var(--vc-dark-text) !important;
  }

  html body .td-footer-template-wrap a:hover,
  html body .td-footer-template-wrap a:focus,
  html body .td-footer-wrap a:hover,
  html body .td-footer-wrap a:focus {
    color: var(--vc-dark-link) !important;
  }

  body .td-footer-template-wrap .tdm-descr,
  body .td-footer-wrap .tdm-descr {
    color: var(--vc-dark-muted) !important;
  }

  /*
   * Newspaper aplica fondos claros propios a varias zonas internas. Se
   * corrigen solo dentro del modo oscuro y sin tocar imagenes o anuncios.
   */
  body .td-theme-wrap,
  body .td-module-meta-info {
    background-color: var(--vc-dark-bg) !important;
  }

  body .td-module-meta-info {
    border-color: var(--vc-dark-border) !important;
  }

  body .td-header-template-wrap .tdc_zone.tdc-element-style > .td-element-style,
  body .tdc-content-wrap .tdc-row.stretch_row_1400 > .tdc-element-style > .td-element-style {
    background-color: var(--vc-dark-bg) !important;
    background-image: none !important;
  }

  body .tdm-popup-modal,
  body .tdb-search-form-inner {
    background-color: var(--vc-dark-surface) !important;
    border-color: var(--vc-dark-border) !important;
  }

  ::selection {
    background: var(--vc-dark-accent);
    color: #ffffff;
  }


  /*
   * Cierra los laterales blancos residuales que tagDiv puede introducir en
   * el footer mediante envolturas, zonas o filas con fondo y borde propios.
   */
  body .tdc-footer-wrap,
  body .td-footer-template-wrap,
  body .td-footer-wrap,
  body .td-footer-wrapper,
  body .td-footer-container,
  body .td-sub-footer-container,
  body footer,
  body .tdc-footer-wrap .tdc_zone,
  body .tdc-footer-wrap .tdc-row,
  body .tdc-footer-wrap .td-pb-row,
  body .td-footer-template-wrap .tdc_zone,
  body .td-footer-template-wrap .tdc-row,
  body .td-footer-template-wrap .td-pb-row {
    background-color: #090a0c !important;
    border-left-color: #090a0c !important;
    border-right-color: #090a0c !important;
  }

  /*
   * La sombra se expande fuera del ancho centrado del template y pinta todo
   * el ancho visible, incluso cuando Newspaper conserva gutters laterales.
   */
  body .tdc-footer-wrap,
  body .td-footer-template-wrap {
    box-shadow: 0 0 0 100vmax #090a0c !important;
    clip-path: inset(0 -100vmax) !important;
  }

  html,
  body {
    overflow-x: clip;
  }


  /*
   * Contraste de etiquetas y metadatos de autor en las entradas.
   * Newspaper deja estos enlaces en negro aunque el fondo general sea oscuro.
   */
  html body .tdb_single_tags .tdb-tags a {
    background-color: var(--vc-dark-surface-2) !important;
    border-color: var(--vc-dark-border) !important;
    color: var(--vc-dark-text) !important;
  }

  html body .tdb_single_tags .tdb-tags span {
    background-color: #090a0c !important;
    border-color: var(--vc-dark-border) !important;
    color: #ffffff !important;
  }

  html body .tdb_single_tags .tdb-tags a:hover,
  html body .tdb_single_tags .tdb-tags a:focus {
    background-color: var(--vc-dark-accent) !important;
    border-color: var(--vc-dark-accent) !important;
    color: #ffffff !important;
  }

  html body .tdb_single_author .tdb-author-name,
  html body .tdb_single_author .tdb-author-name-wrap .tdb-author-name,
  html body .tdb_single_author .td-post-author-name a {
    color: var(--vc-dark-text) !important;
  }

  html body .tdb_single_author .tdb-author-name:hover,
  html body .tdb_single_author .tdb-author-name:focus,
  html body .tdb_single_author .td-post-author-name a:hover,
  html body .tdb_single_author .td-post-author-name a:focus {
    color: var(--vc-dark-link) !important;
  }

  html body .tdb_single_author .tdb-author-by,
  html body .tdb_single_author .tdb-author-name-wrap,
  html body .tdb_single_date,
  html body .tdb_single_date .tdb-block-inner,
  html body .tdb_single_date .td-module-date,
  html body .tdb_single_reading_time,
  html body .tdb_single_reading_time .tdb-block-inner,
  html body .tdb_single_reading_time .reading-time-number,
  html body .tdb_single_reading_time .tdb-minute-text,
  html body .tdb_single_reading_time .tdb-add-text {
    color: var(--vc-dark-muted) !important;
  }

  html body .tdb_single_author,
  html body .tdb_single_date,
  html body .tdb_single_reading_time,
  html body .tdb_single_author .tdb-block-inner,
  html body .tdb_single_date .tdb-block-inner,
  html body .tdb_single_reading_time .tdb-block-inner {
    border-color: var(--vc-dark-border) !important;
  }



  /*
   * Portada: tagDiv conserva negro en titulares y metadatos de varias tarjetas.
   * Estas reglas incluyen los módulos estándar y los diseños de bloques usados
   * en la home, sin alterar las imágenes ni los espacios publicitarios.
   */
  html body.home .td_module_wrap .entry-title,
  html body.home .td_module_wrap .entry-title a,
  html body.home .td_module_wrap .td-module-title,
  html body.home .td_module_wrap .td-module-title a,
  html body.home .td_module_wrap h1,
  html body.home .td_module_wrap h2,
  html body.home .td_module_wrap h3,
  html body.home .td_module_wrap h4,
  html body.home .td_module_wrap h5,
  html body.home .td_module_wrap h6,
  html body.home .td_block_wrap .td-module-title,
  html body.home .td_block_wrap .td-module-title a,
  html body.home .td_block_wrap .entry-title,
  html body.home .td_block_wrap .entry-title a,
  html body.home .tdb_module_loop .td-module-title,
  html body.home .tdb_module_loop .td-module-title a,
  html body.home .tdb_module_loop .entry-title,
  html body.home .tdb_module_loop .entry-title a {
    color: var(--vc-dark-text) !important;
  }

  html body.home .td_module_wrap .td-excerpt,
  html body.home .td_module_wrap .td-module-meta-info,
  html body.home .td_module_wrap .td-post-date,
  html body.home .td_module_wrap .td-post-author-name,
  html body.home .td_module_wrap .td-post-author-name a,
  html body.home .td_module_wrap .td-post-views,
  html body.home .td_module_wrap .td-post-comments,
  html body.home .tdb_module_loop .td-module-meta-info,
  html body.home .tdb_module_loop .td-post-date,
  html body.home .tdb_module_loop .td-post-author-name,
  html body.home .tdb_module_loop .td-post-author-name a {
    color: var(--vc-dark-muted) !important;
  }

  html body.home .td_module_wrap .td-module-title a:hover,
  html body.home .td_module_wrap .entry-title a:hover,
  html body.home .td_block_wrap .td-module-title a:hover,
  html body.home .tdb_module_loop .td-module-title a:hover,
  html body.home .tdb_module_loop .entry-title a:hover {
    color: var(--vc-dark-link) !important;
  }



  /*
   * Bloque institucional de la portada: esta franja pertenece a un módulo
   * inline de tagDiv y no al contenedor de footer convencional.
   */
  html body.home .tdm_block_inline_text .tdm-descr,
  html body.home .tdm_block_inline_text .tdm-descr p,
  html body.home .tdm_block_inline_text .tdm-title,
  html body.home .tdm_block_inline_text .tdm-title a {
    color: var(--vc-dark-text) !important;
  }

  html body.home .tdm_block_inline_text .tdm-descr a {
    color: var(--vc-dark-link) !important;
  }

  html body.home .tdm_block_inline_text .tdm-descr a:hover,
  html body.home .tdm_block_inline_text .tdm-descr a:focus {
    color: var(--vc-dark-accent) !important;
  }



  /* Lupa de búsqueda del encabezado: contraste visible en modo oscuro. */
  html body .tdb-head-search-btn,
  html body .tdb-head-search-btn i,
  html body .td-search-trigger,
  html body .td-search-trigger i,
  html body .td-icon-search,
  html body .td-icon-search:before {
    color: var(--vc-dark-text) !important;
    border-color: var(--vc-dark-text) !important;
    opacity: 1 !important;
  }

  html body .tdb-head-search-btn:hover,
  html body .tdb-head-search-btn:hover i,
  html body .td-search-trigger:hover,
  html body .td-search-trigger:hover i,
  html body .tdb-head-search-btn:focus,
  html body .tdb-head-search-btn:focus i {
    color: var(--vc-dark-link) !important;
    border-color: var(--vc-dark-link) !important;
  }

}