/* Estilos básicos - Versión minimalista */

:root {
  /* Color principal base - cambiar este color afecta todo el sitio */
  --primary-color: #392888;
  
  /* Variaciones del color principal para modo oscuro */
  --primary-light: #5a3da8;
  --primary-lighter: #7b52c8;
  --primary-dark: #2a1f66;
  --primary-darker: #1b1444;
  --primary-alpha-10: rgba(57, 40, 136, 0.1);
  --primary-alpha-20: rgba(57, 40, 136, 0.2);
  --primary-alpha-30: rgba(57, 40, 136, 0.3);
  --primary-alpha-50: rgba(57, 40, 136, 0.5);
  
  /* Colores de fondo y texto para modo oscuro (default) */
  --bg-color: #1a1a1a;
  --bg-secondary: #252525;
  --bg-tertiary: #2f2f2f;
  --text-color: #ffffff;
  --text-muted: #aaaaaa;
  
  /* Tamaños de fuente base - configurables */
  --font-size-base: 14px;
  --font-size-xs: 0.64em;    /* ~9px */
  --font-size-sm: 0.71em;    /* ~10px */
  --font-size-md: 0.86em;    /* ~12px */
  --font-size-lg: 1em;       /* ~14px */
  --font-size-xl: 1.14em;    /* ~16px */
  --font-size-xxl: 1.29em;   /* ~18px */
  
  /* Tamaños específicos */
  --font-size-button: var(--font-size-xs);
  --font-size-input: var(--font-size-md);
  --font-size-menu: var(--font-size-md);
  --font-size-source: 0.8em;
  --font-size-title: var(--font-size-xl);
  --font-size-meta: 0.79em;  /* ~11px */
  --font-size-subhead: var(--font-size-md);
  --font-size-footer: 0.79em; /* ~11px */
  --font-size-tag: 0.79em;   /* ~11px */
  --font-size-icon: 1.29em;  /* ~18px */
}

[data-theme="light"] {
  /* Variaciones del color principal para modo claro */
  --primary-light: #6b4db8;
  --primary-lighter: #8c6dd8;
  --primary-dark: #2a1f66;
  --primary-darker: #1b1444;
  --primary-alpha-10: rgba(57, 40, 136, 0.1);
  --primary-alpha-20: rgba(57, 40, 136, 0.2);
  --primary-alpha-30: rgba(57, 40, 136, 0.3);
  --primary-alpha-50: rgba(57, 40, 136, 0.5);
  
  /* Colores de fondo y texto para modo claro */
  --bg-color: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #eeeeee;
  --text-color: #000000;
  --text-muted: #666666;
  
  /* Colores de links para modo claro */
  --link-color: var(--primary-color);
  --link-hover: var(--primary-light);
}

/* Colores de links para modo oscuro - más brillantes y saturados */
[data-theme="dark"] a,
body:not([data-theme]) a {
  --link-color: #7b52c8;
  --link-hover: #9d7ae8;
}

[data-theme="dark"] .item_cat a,
body:not([data-theme]) .item_cat a {
  color: #7b52c8 !important;
}

[data-theme="dark"] .item_cat a:hover,
body:not([data-theme]) .item_cat a:hover {
  color: #9d7ae8 !important;
}

[data-theme="dark"] .item_tags a,
body:not([data-theme]) .item_tags a {
  color: #7b52c8 !important;
}

[data-theme="dark"] .item_tags a:hover,
body:not([data-theme]) .item_tags a:hover {
  color: #9d7ae8 !important;
}

[data-theme="dark"] h2 a,
body:not([data-theme]) h2 a {
  color: var(--text-color);
}

[data-theme="dark"] h2 a:hover,
body:not([data-theme]) h2 a:hover {
  color: #9d7ae8 !important;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "darkmode-off", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--font-size-base);
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

/* Header básico */
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--bg-secondary);
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}

.headwrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.layout-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.layout-btn {
  padding: 6px 10px;
  background-color: var(--bg-tertiary);
  color: var(--text-color);
  border: none;
  cursor: pointer;
  font-size: var(--font-size-md);
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-btn:hover {
  background-color: var(--primary-color);
  color: white;
}

.layout-btn.active {
  background-color: var(--primary-color);
  color: white;
}

.grid-columns {
  padding: 6px 10px;
  background-color: var(--bg-tertiary);
  color: var(--text-color);
  border: none;
  font-size: var(--font-size-md);
  cursor: pointer;
  margin-left: 5px;
}

#equis_logo img {
  height: 40px;
  width: auto;
}

.search {
  padding: 8px 12px;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: var(--font-size-input);
  width: 300px;
}

.search:focus {
  background-color: var(--primary-alpha-10);
  outline: none;
}

#the_time, #the_date {
  font-size: var(--font-size-md);
  color: var(--text-color);
}

/* Navegación de fechas */
.date-navigation {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

.date-navigation #the_date {
  min-width: 100px;
  text-align: center;
}

.date-nav-btn {
  background: transparent;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  padding: 4px 4px;
  font-size: var(--font-size-sm);
  opacity: 0;
  transition: opacity 0.3s, color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mostrar botones habilitados al hacer hover */
.date-navigation:hover .date-nav-btn:not(:disabled) {
  opacity: 1;
}

.date-nav-btn:hover:not(:disabled) {
  color: var(--text-color);
}

/* Ocultar completamente los botones deshabilitados */
.date-nav-btn:disabled {
  opacity: 0;
  cursor: not-allowed;
  pointer-events: none;
}

/* En móvil, los botones habilitados siempre son visibles */
@media (max-width: 768px) {
  .date-nav-btn:not(:disabled) {
    opacity: 1;
  }
  
  .date-nav-btn:disabled {
    opacity: 0;
  }
}

/* Contenedor del carrusel de categorías */
.categories-menu-wrapper {
  position: relative;
  margin-bottom: 20px;
}

/* Menú de categorías - Carrusel en móvil/ventanas pequeñas */
.categories-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin-bottom: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE y Edge */
  scroll-snap-type: x proximity;
}

/* Ocultar scrollbar pero mantener funcionalidad */
.categories-menu::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* En ventanas pequeñas, convertir en carrusel horizontal */
@media (max-width: 768px) {
  .categories-menu-wrapper {
    position: relative;
    padding: 0 40px; /* Espacio para las flechas */
  }
  
  .categories-menu {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    gap: 8px;
    scroll-snap-type: x proximity;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }
  
  .categories-menu:active {
    cursor: grabbing;
  }
  
  .categories-menu .category-link {
    flex-shrink: 0;
    scroll-snap-align: start;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }
  
  /* Flechas de navegación del carrusel */
  .categories-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0.8;
    transition: opacity 0.3s, background 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  
  .categories-nav-arrow:hover {
    opacity: 1;
    background: var(--primary-light);
  }
  
  .categories-nav-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }
  
  .categories-nav-arrow.prev {
    left: 0;
  }
  
  .categories-nav-arrow.next {
    right: 0;
  }
}

.categories-menu .category-link {
  padding: 2px 12px;
  background-color: transparent;
  color: var(--text-color);
  text-decoration: none;
  font-size: var(--font-size-md);
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;
  display: inline-block;
}

.categories-menu .category-link:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-color);
}

.categories-menu .category-link.active {
  background-color: var(--primary-color);
  color: white;
}

/* Botón scroll to top */
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  padding: 0;
  background-color: var(--primary-color);
  color: white;
  cursor: pointer;
  font-size: 1.5em;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, transform 0.2s, opacity 0.3s, visibility 0.3s;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.scroll-to-top:hover {
  background-color: var(--primary-light);
  transform: scale(1.1);
}

.scroll-to-top i {
  display: block;
}

/* Toggle de tema - circular con icono */
.theme-toggle {
  width: 25px;
  height: 25px;
  min-width: 25px;
  min-height: 25px;
  padding: 0;
  background-color: var(--primary-color);
  color: white;
  cursor: pointer;
  font-size: 1.2em;
  border: none;
  border-radius: 50%;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, transform 0.2s;
}

.theme-toggle:hover {
  background-color: var(--primary-light);
  transform: scale(1.1);
}

.theme-toggle i {
  display: block;
}

/* Sidebar */
#menu {
  position: fixed;
  left: 0;
  top: 30px;
  width: 220px;
  height: calc(100vh - 30px);
  overflow-y: auto;
  padding: 20px;
  background-color: var(--bg-secondary);
  scrollbar-gutter: stable; /* Reservar espacio para el scrollbar siempre */
  scrollbar-width: thin; /* Firefox - siempre presente pero delgado */
  scrollbar-color: transparent transparent; /* Firefox: transparente por defecto */
  -ms-overflow-style: scrollbar; /* IE y Edge - siempre presente */
  transition: width 0.3s ease;
}

/* Ocultar controles móviles en desktop */
.mobile-menu-controls {
  display: none;
}

/* Ocultar botón hamburguesa en desktop */
.menu-toggle {
  display: none;
}


/* Scrollbar siempre presente pero transparente por defecto */
#menu::-webkit-scrollbar {
  width: 6px;
  display: block; /* Siempre presente para reservar espacio */
}

/* Scrollbar minimalista - solo la barrita, fondo transparente */
#menu::-webkit-scrollbar-track {
  background: transparent;
}

#menu::-webkit-scrollbar-thumb {
  background: transparent; /* Transparente por defecto */
  min-height: 30px;
  border-radius: 3px;
}

/* Mostrar scrollbar al hacer hover */
#menu:hover::-webkit-scrollbar-thumb {
  background: var(--primary-color); /* Visible al hover */
}

#menu:hover {
  scrollbar-color: var(--primary-color) transparent; /* Firefox: visible al hover */
}

#menu::-webkit-scrollbar-thumb:hover {
  background: var(--primary-light);
}

.menu-buttons {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}

.menu_unsel, .menu_clear, .toggler {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background-color: var(--bg-tertiary);
  color: var(--text-color);
  cursor: pointer;
  text-align: center;
  border: none;
  box-shadow: none;
  font-size: var(--font-size-button);
  flex: 1;
}

.menu_unsel:hover, .menu_clear:hover:not(:disabled), .toggler:hover {
  background-color: var(--primary-color);
  color: white;
}

.menu_clear:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pack_list, .source_list {
  margin: 10px 0;
}

.pack_list {
  display: block !important;
}

.source_list {
  display: block !important;
}

/* Advanced section */
.advanced-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--bg-tertiary);
}

.advanced-toggle, .filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  background-color: var(--bg-tertiary);
  color: var(--text-color);
  cursor: pointer;
  text-align: left;
  border: none;
  box-shadow: none;
  font-size: var(--font-size-menu);
  transition: background-color 0.3s;
}

.advanced-toggle:hover, .filter-toggle:hover,
.advanced-toggle.active, .filter-toggle.active {
  background-color: var(--primary-color);
  color: white;
}

.advanced-toggle i, .filter-toggle i {
  transition: transform 0.3s;
}

.advanced-content {
  margin-top: 10px;
}

.filter-group {
  margin-bottom: 15px;
}

.filter-options {
  margin-top: 5px;
  padding-left: 15px;
}

.filter-option {
  padding: 2px 0;
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 0;
}

.filter-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  cursor: pointer;
}

.filter-option label {
  cursor: pointer;
  user-select: none;
  font-size: 0.85em;
  display: inline-flex;
  align-items: center;
  margin-left: 0;
  padding-left: 0;
  line-height: 1;
  flex: 1;
  font-weight: normal;
}

/* Estilo de checkbox circular con X para filtros - mismo estilo que fuentes */
.filter-checkbox + label {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-source);
}

.filter-checkbox + label::before {
  content: "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  margin-right: 5px;
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  border-radius: 50%;
  text-align: center;
  transition: background-color 0.5s, border-color 0.5s, color 0.5s;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--primary-color);
  vertical-align: middle;
  flex-shrink: 0;
  box-sizing: border-box;
  line-height: 1;
  font-size: 14px;
  font-weight: bold;
}

.filter-checkbox:checked + label::before {
  content: "✕";
  background-color: var(--primary-color);
  color: white;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  margin-right: 5px;
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  border: 1px solid var(--primary-color);
  border-radius: 50%;
  font-size: 8px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
  vertical-align: middle;
  flex-shrink: 0;
  text-align: center;
}

.filter-checkbox:checked + label {
  color: var(--primary-color);
}

/* En modo oscuro, usar colores más brillantes para mejor contraste */
[data-theme="dark"] .filter-checkbox:checked + label::before,
body:not([data-theme]) .filter-checkbox:checked + label::before {
  background-color: var(--primary-lighter);
  border-color: var(--primary-lighter);
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  margin-right: 5px;
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  border: 1px solid var(--primary-lighter);
  font-size: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

[data-theme="dark"] .filter-checkbox:checked + label,
body:not([data-theme]) .filter-checkbox:checked + label {
  color: var(--primary-lighter);
}

/* Political Alignment Slider */
.political-alignment-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--bg-tertiary);
}

.political-slider-container {
  padding: 15px 0;
}

.political-slider-wrapper {
  position: relative;
  width: 100%;
  padding: 20px 0 30px 0;
}

.political-slider-track {
  position: relative;
  width: 100%;
  height: 10px;
  background: linear-gradient(to right, 
    #ff4444 0%, 
    #ff8844 25%, 
    #ffcc00 50%, 
    #4488ff 75%, 
    #4444ff 100%);
  border-radius: 5px;
  margin-bottom: 10px;
  transition: background 0.3s ease;
}

.political-slider {
  position: absolute;
  width: 100%;
  height: 8px;
  top: 0;
  left: 0;
  background: transparent;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: all;
  z-index: 2;
  cursor: pointer;
}

.political-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: white;
  border: 3px solid var(--primary-color);
  border-radius: 50%;
  cursor: grab;
  pointer-events: all;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.political-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  border-color: var(--primary-light);
}

.political-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
}

.political-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: white;
  border: 3px solid var(--primary-color);
  border-radius: 50%;
  cursor: grab;
  pointer-events: all;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.political-slider::-moz-range-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  border-color: var(--primary-light);
}

.political-slider::-moz-range-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
}

.political-slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.75em;
}

.slider-label-left,
.slider-label-center,
.slider-label-right {
  color: #ffffff;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 1px rgba(0, 0, 0, 0.5);
  /* Sombra de texto para mejor legibilidad sobre cualquier color de fondo */
}

/* Asegurar buena legibilidad en modo claro también */
[data-theme="light"] .slider-label-left,
[data-theme="light"] .slider-label-center,
[data-theme="light"] .slider-label-right {
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.7);
}

.political-slider-value {
  text-align: center;
  margin-top: 10px;
  font-size: 0.9em;
  color: var(--text-color);
  font-weight: 600;
}

.political-slider-controls {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 15px;
  flex-wrap: wrap;
}

.political-slider-controls .filter-option {
  margin: 0;
  padding: 0;
}

.pack-icon {
  display: inline-block;
  padding: 5px;
  margin: 0;
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--font-size-icon);
  border: none;
  box-shadow: none;
  transition: color 0.3s;
  cursor: pointer;
}

.pack-icon:hover:not(.active) {
  color: var(--primary-color);
}

.pack-icon.active {
  color: var(--primary-color);
}

/* En modo oscuro, los iconos activos pueden ser más claros para mejor contraste */
[data-theme="dark"] .pack-icon.active,
body:not([data-theme]) .pack-icon.active {
  color: var(--primary-lighter);
}

/* Hover en estado activo: mantener el color activo */
.pack-icon.active:hover {
  color: var(--primary-color);
}

[data-theme="dark"] .pack-icon.active:hover,
body:not([data-theme]) .pack-icon.active:hover {
  color: var(--primary-lighter);
}

.pack {
  display: flex;
  width: 180px;
  justify-content: space-between;
  align-items: center;
}

.source {
  padding: 2px 0;
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 0;
}

.xchecker {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  cursor: pointer;
}

.source_name {
  cursor: pointer;
  user-select: none;
  font-size: var(--font-size-source);
  display: inline-flex;
  align-items: center;
  margin-left: 0;
  padding-left: 0;
  line-height: 1;
  flex: 1;
  font-weight: normal;
}

/* Estilo original del checkbox - círculo con X (más pequeño) */
.xchecker + label {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-source);
}

.xchecker + label::before {
  content: "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  margin-right: 5px;
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  border-radius: 50%;
  text-align: center;
  transition: background-color 0.5s, border-color 0.5s, color 0.5s;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--primary-color);
  vertical-align: middle;
  flex-shrink: 0;
  box-sizing: border-box;
  line-height: 1;
  font-size: 14px;
  font-weight: bold;
}

.xchecker:checked + label::before {
  content: "✕";
  background-color: var(--primary-color);
  color: white;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  margin-right: 5px;
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  border: 1px solid var(--primary-color);
  border-radius: 50%;
  font-size: 8px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
  vertical-align: middle;
  flex-shrink: 0;
  text-align: center;
}

.xchecker:checked + label {
  color: var(--primary-color);
  font-weight: normal;
}

/* Hover en source: cambiar color del texto a primary-color */
.source:hover .source_name {
  color: var(--primary-color) !important;
  transition: color 0.2s;
}

/* En modo oscuro, usar primary-lighter para hover */
[data-theme="dark"] .source:hover .source_name,
body:not([data-theme]) .source:hover .source_name {
  color: var(--primary-lighter) !important;
}

/* En modo oscuro, usar colores más brillantes para mejor contraste */
[data-theme="dark"] .xchecker:checked + label::before,
body:not([data-theme]) .xchecker:checked + label::before {
  background-color: var(--primary-lighter);
  border-color: var(--primary-lighter);
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  margin-right: 5px;
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  border: 1px solid var(--primary-lighter);
  border-radius: 50%;
  box-sizing: border-box;
  font-size: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
}

[data-theme="dark"] .xchecker:checked + label,
body:not([data-theme]) .xchecker:checked + label {
  color: var(--primary-lighter);
  font-weight: normal;
}

/* Contenido principal */
.overwrap {
  margin-top: 60px;
  margin-left: 220px;
  padding: 20px;
  transition: margin-left 0.3s ease;
}


.content {
  margin: 0 auto;
}


/* Grid de noticias */
.newsline {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.newsline li {
  flex: 1 1 300px;
  min-width: 300px;
  max-width: 100%;
  padding: 15px;
  background-color: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.newsline li * {
  max-width: 100%;
  box-sizing: border-box;
}

.newsline li.news-large {
  flex: 1 1 600px;
  min-width: 600px;
}

.newsline li.news-small {
  flex: 1 1 200px;
  min-width: 200px;
  max-width: 100%;
}

/* En masonry, news-small debe respetar el ancho de la columna */
.newsline.layout-masonry li.news-small {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-bottom: 40px;
  border-top: 2px solid transparent; /* Se sobrescribe dinámicamente con el color del feed desde JavaScript */
}

/* Border-top para news-small en todos los layouts */
.newsline li.news-small {
  border-top: 2px solid transparent; /* Se sobrescribe dinámicamente con el color del feed desde JavaScript */
}

/* Layout Masonry (default) */
.newsline.layout-masonry {
  display: block;
  column-gap: 20px;
  column-fill: balance;
  column-count: var(--masonry-columns, 5); /* Usar variable CSS, default 5 */
}

.newsline.layout-masonry li {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  break-inside: avoid;
  page-break-inside: avoid;
  overflow: hidden;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  contain: layout style;
}

.newsline.layout-masonry li * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Asegurar que las imágenes no expandan en masonry */
.newsline.layout-masonry li .item_img {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex-shrink: 1;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.newsline.layout-masonry li .item_img::before {
  padding-top: 56.25%;
  display: block;
  content: "";
  width: 100%;
  box-sizing: border-box;
}

.newsline.layout-masonry li .item_img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100%;
  object-fit: cover;
  box-sizing: border-box;
}

/* Responsive para Masonry - solo en pantallas pequeñas/medianas */
@media (max-width: 480px) {
  .newsline.layout-masonry {
    column-count: 1 !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .newsline.layout-masonry {
    column-count: 2 !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .newsline.layout-masonry {
    column-count: 3 !important;
  }
}

@media (min-width: 1025px) and (max-width: 1440px) {
  .newsline.layout-masonry {
    column-count: 4 !important;
  }
}

/* En pantallas grandes (>= 1441px), usar la variable CSS que viene de JavaScript */
@media (min-width: 1441px) {
  .newsline.layout-masonry {
    column-count: var(--masonry-columns, 5);
  }
}

/* Layout Grid */
.newsline.layout-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
  gap: 20px;
  align-items: start;
}

.newsline.layout-grid li {
  flex: none;
  min-width: auto;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  padding-bottom: 50px; /* Espacio para el footer absoluto */
  overflow: hidden;
  box-sizing: border-box;
}

/* Layout List */
.newsline.layout-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.newsline.layout-list li {
  flex: none;
  min-width: auto;
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  padding-bottom: 50px; /* Espacio para el footer absoluto */
  padding: 10px 15px 50px 15px; /* Reducir padding vertical */
}

/* Si hay imagen en el header, cambiar a layout horizontal */
.newsline.layout-list li .item_header:has(.item_img) {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: flex-start;
}

.newsline.layout-list li .item_img {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  margin-right: 0;
  flex-shrink: 0;
  order: -1;
}

/* Cuando hay imagen, el contenido del header (sin la imagen) debe ocupar el espacio */
.newsline.layout-list li .item_header:has(.item_img) > .meta,
.newsline.layout-list li .item_header:has(.item_img) > h2 {
  flex: 1;
  min-width: 0;
}

/* Contenedor para el contenido - ocupa todo el ancho */
.newsline.layout-list li > .item_header,
.newsline.layout-list li > .item_content,
.newsline.layout-list li > .tags,
.newsline.layout-list li > .item_foot {
  width: 100%;
  box-sizing: border-box;
}

/* En lista, el footer debe estar pegado al bottom del item */
.newsline.layout-list li .item_foot {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  margin-top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.item_header {
  margin-bottom: 10px;
  position: relative;
  padding-top: 35px; /* Espacio para el meta absoluto */
}

.item_author {
  font-size: 0.65em; /* Muy pequeñito */
  color: var(--text-muted);
  display: block;
  text-align: right;
  margin-top: 2px;
  margin-bottom: 5px;
}

/* En lista, reducir márgenes verticales */
.newsline.layout-list li .item_header {
  margin-bottom: 5px;
}

.newsline.layout-list li .item_content {
  margin: 5px 0;
}

.newsline.layout-list li .tags {
  margin: 5px 0;
}

.meta {
  font-size: var(--font-size-meta);
  color: white; /* Texto siempre blanco */
  margin: 0;
  padding: 8px 15px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  
}

/* Asegurar que meta esté pegado en todos los layouts - posicionado relativo al li */
.newsline li {
  position: relative; /* Necesario para que el meta absoluto se posicione relativo al item */
}

.newsline li .item_header {
  position: relative;
  padding-top: 15px; /* Espacio para el meta absoluto */
}

.newsline li .item_header .meta {
  position: absolute;
  top: -15px;
  left: -15px;
  right: 0px;
  margin: 0;
  padding: 5px 15px;
  width: 500px;
  box-sizing: border-box;
  clip-path: polygon(0px 0%, /* top-left */ 100% 0%, /* top-right */ 100% 0px, /* right-top */ 100% 0%, /* right-bottom */ 88% 100%, /* bottom-right */ 0px 100%, /* bottom-left */ 0% calc(100% - 20px), /* left-bottom */ 0% 20px /* left-top */)
}

/* En lista, ajustar márgenes */
.newsline.layout-list li .item_header {
  padding-top: 35px;
}

.newsline.layout-list li .item_header .meta {
  padding: 8px 10px;
}

/* Iconos de administración */
.newsline li .admin-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
  z-index: 10;
}

.newsline li .admin-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  text-decoration: none;
  transition: all 0.3s;
  backdrop-filter: blur(4px);
}

.newsline li .admin-actions a:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

.newsline li .admin-actions .admin-edit-icon {
  background: rgba(57, 40, 136, 0.8);
}

.newsline li .admin-actions .admin-edit-icon:hover {
  background: rgba(57, 40, 136, 1);
}

.newsline li .admin-actions .admin-delete-icon {
  background: rgba(220, 53, 69, 0.8);
}

.newsline li .admin-actions .admin-delete-icon:hover {
  background: rgba(220, 53, 69, 1);
}

/* Botón para descartar imágenes (lista negra) */
.blacklist-image-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(220, 53, 69, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.blacklist-image-btn:hover {
  background: rgba(220, 53, 69, 1);
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.blacklist-image-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.blacklist-image-btn i {
  font-size: 14px;
}

.newsline li .admin-actions i {
  font-size: 14px;
}

.item_cat a {
  font-style: italic;
  font-size: .8em;
  color: inherit; /* Heredar el color del meta para mejor contraste */
  text-decoration: none;
  text-transform: capitalize; /* Capitalizar primera letra de cada palabra */
}

.item_cat a:hover {
  opacity: 0.8; /* Efecto hover más sutil cuando hereda color */
}

.item_img {
  width: 100%;
  max-width: 100%;
  margin: 10px 0;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}

/* Estilos para wrapper de imágenes (solo en modo admin) */
.item_img .image-wrapper {
  position: relative;
  width: 100%;
  display: block;
  margin-bottom: 5px;
}

.item_img .image-wrapper::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 aspect ratio por defecto */
}

.item_img .image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  display: block;
  box-sizing: border-box;
}

h2 {
  margin: 10px 0;
  font-size: var(--font-size-title);
  line-height: 1.4;
  font-family: "darkmode-off", sans-serif;
  font-weight: 700;
  font-style: normal;
}

h2 a {
  color: var(--text-color);
  text-decoration: none;
}

h2 a:hover {
  color: var(--primary-color);
}

.item_content {
  margin: 10px 0;
}

.item_subhead {
  font-size: var(--font-size-subhead);
  line-height: 1.5;
  color: var(--text-muted);
}

.tags {
  margin: 10px 10px 20px 0;
}

.item_tags {
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 5px;
}

.item_tags a {
  color: var(--primary-color);
  text-decoration: none;
  font-size: var(--font-size-tag);
}

.item_tags a:hover {
  color: var(--primary-light);
}

.item_foot {
  margin-top: auto;
  padding-top: 10px;
  font-size: var(--font-size-footer);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-tertiary);
  padding: 10px;
  margin: 15px -15px -15px -15px;
  width: calc(100% + 30px);
  box-sizing: border-box;
}

/* Footer absoluto solo en Grid */
.newsline.layout-grid li .item_foot {
  margin-top: 0;
  padding-top: 10px;
  font-size: var(--font-size-footer);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-tertiary);
  padding: 10px;
  margin: 0;
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  box-sizing: border-box;
}

/* Footer en Masonry - ocupar todo el ancho */
.newsline.layout-masonry li .item_foot {
  position: absolute;
  margin-top: 5px;
  bottom: 0px;
  left: 0;
  width: 100%;
  margin: 0;
  margin-top: auto;
  box-sizing: border-box;
}

.item_source {
  font-weight: bold;
}

.item_pubdate {
  color: inherit; /* Heredar el color del footer para mejor contraste */
}

/* Colores de feeds - fallback si no hay color en BD (colores originales) 
   Estos colores solo se aplican como fallback cuando el JavaScript no ha aplicado 
   un color desde la BD. El JavaScript aplica los colores con !important en estilos inline,
   que tienen mayor especificidad que estos estilos CSS, por lo que estos solo actúan como fallback. */
._cooperativa.item_foot { background-color: #005be5; color: white; }
._biobio.item_foot { background-color: #154f90; color: white; }
._emol.item_foot { background-color: #004da6; color: white; }
._la_tercera.item_foot { background-color: #aa272f; color: white; }
._publimetro.item_foot { background-color: #279655; color: white; }
._elmercurio.item_foot { background-color: #ffffff; color: black; }
._lun.item_foot { background-color: #000099; color: white; }
._meganoticias.item_foot { background-color: #1ea88b; color: white; }
._teletrece.item_foot { background-color: #ff5b22; color: white; }
._chilevision.item_foot { background-color: #e72b6d; color: white; }
._cnn_chile.item_foot { background-color: #ca0000; color: white; }
._adn.item_foot { background-color: #dd1f26; color: white; }
._elmostrador.item_foot { background-color: #e9661e; color: white; }
._el_dínamo.item_foot { background-color: #ffee00; color: black; }
._the_clinic.item_foot { background-color: #ffffff; color: black; }
._ex-ante.item_foot { background-color: #005784; color: white; }
._lacuarta.item_foot { background-color: #e32417; color: white; }
._lasegunda.item_foot { background-color: #159E89; color: white; }
._hoyxhoy.item_foot { background-color: #3f2c5d; color: white; }
._fm_dos.item_foot { background-color: #532489; color: white; }
._futuro.item_foot { background-color: #e54322; color: white; }
._rockandpop.item_foot { background-color: #e31519; color: white; }
._la_red.item_foot { background-color: #2cbec3; color: white; }
._24horas.item_foot { background-color: #ef1d27; color: white; }
._via_x.item_foot { background-color: #d2304a; color: white; }
._soychile.item_foot { background-color: #ff0000; color: white; }
._la_nación.item_foot { background-color: #f05c22; color: white; }
._agricultura.item_foot { background-color: #f42534; color: white; }
._imagina.item_foot { background-color: #000000; color: white; }
._ciper.item_foot { background-color: #000000; color: white; }

/* Estados de carga */
.loader_text {
  display: inline-block;
  padding: 10px;
  color: var(--primary-color);
}

.img404 {
  text-align: center;
  padding: 40px;
}

.img404 img {
  max-width: 300px;
  height: auto;
}

/* Responsive */
@media (max-width: 480px) {
  /* Ocultar elementos del header en móvil excepto logo */
  .headwrap .search,
  .headwrap #the_time,
  .headwrap .date-navigation,
  .header-controls {
    display: none !important;
  }
  
  /* Ocultar la hora en móvil (ya está en el teléfono) */
  #the_time {
    display: none !important;
  }
  
  /* Mostrar solo logo y botón hamburguesa */
  #header {
    padding: 10px;
    justify-content: space-between;
  }
  
  .headwrap {
    flex: 0 0 auto;
  }
  
  /* Menú hamburguesa en móvil */
  .menu-toggle {
    display: flex !important;
    padding: 12px 16px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1.5em;
    z-index: 1002;
    position: fixed;
    top: 10px;
    right: 10px;
    border-radius: 4px;
    min-width: 48px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
  }
  
  .menu-toggle:hover {
    background-color: var(--primary-light);
  }
  
  /* Botón cerrar (X) - visible solo cuando el menú está abierto */
  .menu-close {
    display: none !important;
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 12px 16px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1.5em;
    z-index: 1003;
    border-radius: 4px;
    min-width: 48px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
  }
  
  .menu-close:hover {
    background-color: var(--primary-light);
  }
  
  .menu-close.show {
    display: flex !important;
  }
  
  /* Ocultar iconos de tipo de fuente en móvil */
  .pack_list {
    display: none !important;
  }
  
  /* Mostrar controles móviles solo en móvil */
  .mobile-menu-controls {
    display: block !important;
    padding: 20px;
    border-bottom: 1px solid var(--bg-tertiary);
  }
  
  .mobile-menu-controls .mobile-logo {
    display: block;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .mobile-menu-controls .mobile-logo img {
    height: 50px;
    width: auto;
    max-width: 100%;
  }
  
  /* Date navigation en menú móvil */
  .mobile-date-navigation {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 15px 0;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 8px;
  }
  
  .mobile-date-navigation #mobile_the_date {
    font-size: 1em;
    font-weight: bold;
    color: var(--text-color);
    min-width: 100px;
    text-align: center;
  }
  
  .mobile-date-navigation .date-nav-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .mobile-date-navigation .date-nav-btn:hover:not(:disabled) {
    background: var(--primary-light);
  }
  
  .mobile-date-navigation .date-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }
  
  /* Menú oculto por defecto en móvil, se desliza desde la izquierda */
  #menu {
    position: fixed !important;
    left: -80vw !important; /* Oculto fuera de la pantalla (80% del ancho) */
    top: 0 !important;
    width: 80vw !important; /* 80% del ancho de la pantalla */
    max-width: 400px; /* Máximo 400px para pantallas muy grandes */
    height: 100vh !important;
    transition: left 0.3s ease;
    z-index: 1001;
    background-color: var(--bg-secondary);
    display: block !important; /* Siempre presente para la animación */
    overflow-y: auto;
    padding-top: 0px; /* Espacio para el header */
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
  }
  
  #menu.mobile-open {
    left: 0 !important; /* Visible cuando está abierto */
  }
  
  .mobile-menu-controls .search {
    width: 100%;
    margin-bottom: 20px;
    padding: 14px 16px;
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--bg-tertiary);
    font-size: 1.1em;
    border-radius: 4px;
    min-height: 48px;
    box-sizing: border-box;
  }
  
  .mobile-menu-controls .mobile-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 1em;
    color: var(--text-color);
    padding: 10px 0;
  }
  
  .mobile-menu-controls .mobile-theme-toggle {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    padding: 0;
    background-color: var(--primary-color);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1.4em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: background-color 0.3s, transform 0.2s;
  }
  
  .mobile-menu-controls .mobile-theme-toggle:hover {
    background-color: var(--primary-light);
    transform: scale(1.1);
  }
  
  .mobile-menu-controls .mobile-theme-toggle i {
    display: block;
  }
  
  /* Hacer elementos del menú más grandes y táctiles */
  #menu .source {
    padding: 5px 0;
    min-height: 56px;
    display: flex;
    align-items: center;
  }
  
  #menu .source .xchecker {
    width: 32px;
    height: 32px;
    min-width: 32px;
    margin-right: 12px;
  }
  
  /* Hacer el círculo del checkbox más grande en móvil */
  #menu .source .xchecker + label::before {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    font-size: 16px !important;
  }
  
  #menu .source .xchecker:checked + label::before {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    font-size: 14px !important;
  }
  
  #menu .source .source_name {
    font-size: 1.1em;
    padding: 8px 0;
    cursor: pointer;
    flex: 1;
  }
  
  #menu .menu-buttons {
    padding: 20px 0;
  }
  
  #menu .menu-buttons button {
    min-height: 48px;
    padding: 12px 20px;
    font-size: 1em;
    margin-bottom: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  
  #menu .advanced-section {
    padding: 20px 0;
  }
  
  #menu .advanced-toggle,
  #menu .filter-toggle {
    min-height: 48px;
    padding: 12px 20px;
    font-size: 1em;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  #menu .filter-option {
    padding: 14px 20px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  
  #menu .filter-option input[type="checkbox"] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    margin-right: 12px;
  }
  
  /* Hacer el círculo del checkbox de filtros más grande en móvil */
  #menu .filter-option .filter-checkbox + label::before {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    font-size: 16px !important;
  }
  
  #menu .filter-option .filter-checkbox:checked + label::before {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    font-size: 14px !important;
  }
  
  #menu .filter-option label {
    font-size: 1em;
    cursor: pointer;
    flex: 1;
  }
  
  /* Overlay oscuro cuando el menú está abierto */
  .menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
  }
  
  .menu-overlay.active {
    display: block;
  }
  
  .overwrap {
    margin-left: 0 !important;
  }
  
  .newsline li {
    flex: 1 1 100%;
    min-width: 100%;
  }
  
  .newsline li.news-large {
    flex: 1 1 100%;
    min-width: 100%;
  }
  
  /* En móvil, forzar 1 columna en grid también */
  .newsline.layout-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* En móvil, masonry también 1 columna */
  .newsline.layout-masonry {
    column-count: 1 !important;
  }
  
  /* Ajustar header controls en móvil */
  .header-controls {
    flex-wrap: wrap;
    gap: 5px;
  }
  
  .layout-controls {
    order: 2;
    width: 100%;
    justify-content: center;
  }
  
  .theme-toggle {
    order: 1;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  #menu {
    display: none;
  }
  
  .overwrap {
    margin-left: 0;
  }
  
  .newsline.layout-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* En tablet, masonry también 2 columnas */
  .newsline.layout-masonry {
    column-count: 2 !important;
  }
}

/* En pantallas medianas y grandes, usar la variable CSS para grid */
@media (min-width: 769px) {
  .newsline.layout-grid {
    grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
  }
}