/* 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;
}

/* Ocultar botón de auto-refresh en móvil */
.desktop-only {
  display: inline-block;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
}

/* Animación de rotación para el icono de auto-refresh cuando está activo */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.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-wrapper {
  position: relative;
  display: inline-block;
  width: 300px;
}

.search {
  padding: 8px 35px 8px 12px;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: var(--font-size-input);
  width: 100%;
  box-sizing: border-box;
}

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

.search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  padding: 4px 6px;
  font-size: 14px;
  opacity: 0.6;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.search-clear:hover {
  opacity: 1;
  color: var(--primary-color);
}

.search-clear:focus {
  outline: none;
  opacity: 1;
}

#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: fixed;
  top: 60px; /* Debajo del header fixed */
  left: 220px; /* Respetar el sidebar */
  right: 0;
  padding: 20px;
  margin-bottom: 0;
  z-index: 999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Menú de categorías - Por defecto wrap, JavaScript activará carrusel si es necesario */
.categories-menu {
  display: flex;
  flex-wrap: wrap; /* JavaScript cambiará a nowrap si no caben en una fila */
  gap: 8px;
  padding: 0;
  overflow-x: visible; /* JavaScript cambiará a auto si se activa carrusel */
  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 */
}

/* Estilos para modo carrusel (activado por JavaScript cuando no caben en una fila) */
.categories-menu-wrapper.carousel-mode {
  position: fixed;
  padding: 10px 60px; /* Espacio para las flechas + padding original */
  width: 90%;
  margin-left: 20px;

}

.categories-menu.carousel-mode {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.categories-menu.carousel-mode:active {
  cursor: grabbing;
}

.categories-menu.carousel-mode .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: none; /* Oculto por defecto, JavaScript lo mostrará cuando sea necesario */
  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: var(--bg-tertiary);
  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(--primary-color);
  color: white;
}

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

/* Botón scroll to top */
.scroll-to-top,
.help-button {
  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;
}

.help-button {
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

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

.help-button:hover {
  background-color: rgba(0, 0, 0, 0.7);
  transform: scale(1.1);
}

.scroll-to-top i,
.help-button 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: 0;
  padding-top: 0;
  border-top: none;
}

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

.political-slider-wrapper {
  position: relative;
  width: 100%;
  padding: 0 0 10px 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;
}

/* Cuando el politómetro no está activado */
.political-alignment-section:not(.active) .political-slider-track,
.political-slider-track.inactive {
  background: #725b00 !important;
}

.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;
  transition: font-size 0.3s ease;
}

/* Cuando el politómetro no está activado */
.political-alignment-section:not(.active) .political-slider-value,
.political-slider-value.inactive {
  font-size: 0.8em;
}

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

.political-filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  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;
  min-width: 0;
  opacity: 0.5;
  transition: all 0.3s;
}

.political-filter-btn:hover:not(.active) {
  background-color: var(--bg-tertiary);
  color: var(--text-color);
}

.political-filter-btn.active {
  opacity: 1;
  background-color: var(--bg-tertiary);
  color: var(--text-color);
}

.political-filter-btn.active:hover {
  background-color: var(--primary-color);
  color: white;
}

.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;
  padding-top: 50px; /* Espacio para el categories-menu-wrapper fixed */
}

/* Breadcrumbs */
.breadcrumbs {
  margin-bottom: 20px;
  padding: 10px 0;
}

.breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.breadcrumbs li {
  display: flex;
  align-items: center;
}

.breadcrumbs li:not(:last-child)::after {
  content: '/';
  margin-left: 8px;
  color: var(--text-muted);
  opacity: 0.6;
}

.breadcrumbs a {
  color: var(--primary-lighter);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumbs a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.breadcrumbs span {
  color: var(--text-color);
}


/* 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 */
}

/* Barra de carga superior */
.loading-bar {
  position: fixed;
  top: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  z-index: 10000;
  transition: top 0.3s ease;
  overflow: hidden;
}

.loading-bar.show {
  top: 0;
}

.loading-bar-strip {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    #ffeb3b 0px,
    #ffeb3b 20px,
    #000000 20px,
    #000000 40px
  );
  background-size: 40px 5px;
  animation: loading-strip-move 1s linear infinite;
}

@keyframes loading-strip-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 0;
  }
}

/* Layout Masonry (default) */
/* Nota: El orden horizontal (por filas) se maneja con JavaScript */
.newsline.layout-masonry {
  display: block;
  column-gap: 20px;
  column-fill: balance;
  column-count: var(--masonry-columns, 5); /* Usar variable CSS, default 5 */
  direction: ltr; /* Orden de izquierda a derecha como en grid */
  position: relative; /* Para posicionamiento absoluto de items */
}

/* Cuando se aplica la clase masonry-horizontal, usar posicionamiento manual */
.newsline.layout-masonry.masonry-horizontal {
  display: block;
  column-count: unset;
  column-gap: unset;
  column-fill: unset;
  position: relative;
}

.newsline.layout-masonry li {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  min-width: 0; /* Permitir que se ajuste, pero JavaScript calculará columnas basándose en 260px mínimo */
  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;
  direction: ltr; /* Dirección normal del texto dentro de cada item */
}

.newsline.layout-masonry.masonry-horizontal li {
  position: absolute;
  display: block;
  margin-bottom: 0;
  break-inside: unset;
  page-break-inside: unset;
}

.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 */
/* Para tablets y desktop, JavaScript calculará automáticamente basándose en 260px mínimo */
@media (max-width: 480px) {
  .newsline.layout-masonry {
    column-count: 1 !important;
  }
}

/* En pantallas medianas y grandes, usar la variable CSS calculada por JavaScript */
/* JavaScript calculará el número óptimo de columnas basándose en el ancho mínimo de 260px */
@media (min-width: 481px) {
  .newsline.layout-masonry {
    column-count: var(--masonry-columns, 3);
  }
}

/* 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_meta_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
  margin-bottom: 5px;
}

.item_author {
  font-size: 0.8em;
  color: var(--text-muted);
  text-align: left;
}

.item_comments_link {
  font-size: 1em;
  color: var(--link-color);
  text-decoration: none;
  cursor: pointer;
  text-align: right;
  transition: color 0.2s;
}

.item_comments_link:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.item_comments_link .comments-count {
  margin-left: 3px;
}

/* 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 */
}

/* Separador de fecha */
.date-separator {
  width: 100%;
  margin: 30px 0 20px 0;
  padding: 0 15px;
  box-sizing: border-box;
}

.date-separator-content {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.date-separator-text {
  font-size: 0.9em;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 10px;
  background: var(--bg-color);
  position: relative;
  z-index: 1;
}

.date-separator-line {
  border: none;
  border-top: 1px solid var(--text-muted);
  opacity: 0.3;
  margin: 0;
  position: relative;
  top: -20px;
  z-index: 0;
}

/* Ajustes para layout masonry */
.newsline.layout-masonry .date-separator {
  column-span: all;
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Ajustes para layout grid */
.newsline.layout-grid .date-separator {
  grid-column: 1 / -1;
}

.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;
}

/* Ocultar imágenes cuando está activo el modo hide-images */
.newsline.hide-images .item_img {
  display: none !important;
}

/* Ajustar layout cuando las imágenes están ocultas */
/* El contenido se ajusta automáticamente al espacio disponible cuando las imágenes están ocultas */

/* Para layout list, ajustar el header cuando no hay imagen */
.newsline.hide-images.layout-list li .item_header:has(.item_img) {
  flex-direction: column;
}

.newsline.hide-images.layout-list li .item_header:has(.item_img) > .meta,
.newsline.hide-images.layout-list li .item_header:has(.item_img) > h2 {
  width: 100%;
}

/* 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 {
  font-size: 0.8em;
  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: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.img404-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.img404-number {
  font-size: 8rem;
  font-weight: 900;
  color: var(--primary-color);
  line-height: 1;
  text-shadow: 3px 3px 0px var(--primary-dark);
  font-family: 'Arial Black', 'Arial Bold', sans-serif;
}

.img404 img {
  max-width: 300px;
  width: 100%;
  height: auto;
  display: block;
}

.img404-message {
  font-size: 1.2em;
  color: var(--text-color);
  margin: auto;
  max-width: 600px;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 768px) {
  .img404 {
    padding: 40px 15px;
    min-height: 300px;
  }
  
  .img404-content {
    gap: 20px;
    flex-direction: column;
  }
  
  .img404-number {
    font-size: 5rem;
    text-shadow: 2px 2px 0px var(--primary-dark);
  }
  
  .img404 img {
    max-width: 200px;
  }
  
  .img404-message {
    font-size: 1em;
    padding: 0 10px;
  }
}

/* Responsive */
@media (max-width: 768px) {
  /* Ajustar categories-menu-wrapper en tablets */
  .categories-menu-wrapper {
    left: 0;
    top: 80px;
    padding: 10px 50px !important;
  }
  
  .content {
    padding-top: 60px; /* Mantener espacio para el menú */
  }
}

@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;
  }
  
  /* Ajustar categories-menu-wrapper en móvil */
  .categories-menu-wrapper {
    left: 0;
    top: 80px;
    padding: 10px 50px !important;
  }
  
  .content {
    padding-top: 50px; /* Ajustar para header más pequeño */
  }
  
  /* 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;
  }
}

/* Banner de bienvenida (primera visita) */
.welcome-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffcc00;
  color: #000000;
  padding: 8px 15px;
  z-index: 100000000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  animation: slideUpBanner 0.5s ease-out;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.welcome-banner.hiding {
  animation: slideDownBanner 0.5s ease-out forwards;
}

@keyframes slideUpBanner {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDownBanner {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

.welcome-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 0.85em;
  font-weight: 700;
  text-align: center;
  flex-wrap: wrap;
}

.welcome-banner-content span {
  font-weight: 700;
  flex: 1;
  min-width: 200px;
}

.welcome-banner-buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.welcome-banner-btn {
  background: transparent;
  border: 2px solid #000000;
  color: #000000;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.85em;
  transition: all 0.3s;
  font-weight: 700;
  white-space: nowrap;
}

.welcome-banner-btn:hover {
  background-color: #000000;
  color: #ffcc00;
}

.welcome-banner-btn:active {
  transform: scale(0.95);
}

.welcome-banner-close {
  background: transparent;
  border: 2px solid #000000;
  color: #000000;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
  transition: all 0.3s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  font-weight: 700;
}

.welcome-banner-close:hover {
  background-color: #000000;
  color: #ffcc00;
}

.welcome-banner-close:active {
  transform: scale(0.95);
}

@media (max-width: 768px) {
  .welcome-banner {
    padding: 6px 12px;
  }
  
  .welcome-banner-content {
    font-size: 0.75em;
    gap: 8px;
  }
  
  .welcome-banner-content span {
    flex: 1;
  }
  
  .welcome-banner-close {
    min-width: 24px;
    height: 24px;
    font-size: 0.8em;
  }
  
  /* 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 - desactivar masonry-horizontal */
  .newsline.layout-masonry {
    column-count: 1 !important;
  }
  
  .newsline.layout-masonry.masonry-horizontal {
    position: relative !important;
    height: auto !important;
  }
  
  .newsline.layout-masonry.masonry-horizontal li {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }
  
  /* En móvil, list también debe mantener su formato */
  .newsline.layout-list li {
    width: 100% !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;
  }
  
  /* En tablet, usar variable CSS calculada por JavaScript (basada en 260px mínimo) */
  .newsline.layout-grid {
    grid-template-columns: repeat(var(--grid-columns, 2), 1fr);
  }
  
  .newsline.layout-masonry {
    column-count: var(--masonry-columns, 2);
  }
}

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


/* Modal de Ayuda */
.help-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.help-modal-content {
  background-color: var(--bg-color, #ffffff);
  color: var(--text-color, #000000);
  border-radius: 12px;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease-out;
  position: relative;
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.help-modal-close {
  position: absolute;
  top: 20px;
  left: 750px;
  background: var(--bg-color, #ffffff);
  border: 2px solid var(--text-color, #000000);
  color: var(--text-color, #000000);
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.3s;
  z-index: 10002;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .help-modal-close {
    left: auto;
    right: 20px;
    top: 20px;
  }
}

.help-modal-close:hover {
  background-color: var(--text-color, #000000);
  color: var(--bg-color, #ffffff);
  transform: scale(1.1);
}

.help-modal-body {
  padding: 40px 30px 30px;
}

.help-modal-body h2 {
  margin-top: 0;
  margin-bottom: 25px;
  font-size: 1.8em;
  color: var(--primary-light);
  border-bottom: 2px solid var(--primary-light);
  padding-bottom: 10px;
}

.help-section {
  margin-bottom: 25px;
}

.help-section h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.3em;
  color: var(--primary-light);
}

.help-section p {
  margin-bottom: 10px;
  line-height: 1.6;
}

.help-section ul {
  margin: 10px 0;
  padding-left: 25px;
}

.help-section li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.help-section strong {
  color: var(--primary-light);
  font-weight: 600;
}

/* En modo light, usar primary-color para mejor contraste */
[data-theme="light"] .help-modal-body h2 {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

[data-theme="light"] .help-section h3 {
  color: var(--primary-color);
}

[data-theme="light"] .help-section strong {
  color: var(--primary-color);
}

/* Botón de instalación PWA */
.pwa-install-btn {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.pwa-install-btn:hover {
  background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.pwa-install-btn:active {
  transform: translateY(0);
}

.pwa-install-btn i {
  font-size: 1.1em;
}

#pwa-install-instructions {
  margin-top: 15px;
  padding: 15px;
  background: var(--primary-color);
  border-radius: 8px;
  color: var(--text-color);
}

#pwa-install-instructions ol,
#pwa-install-instructions ul {
  margin: 10px 0;
  padding-left: 25px;
}

#pwa-install-instructions li {
  margin-bottom: 8px;
  line-height: 1.6;
}

#pwa-install-instructions strong {
  color: var(--accent-color);
}

@media (max-width: 768px) {
  .help-modal-content {
    max-width: 95%;
    max-height: 85vh;
  }
  
  .help-modal-body {
    padding: 30px 20px 20px;
  }
  
  .help-modal-body h2 {
    font-size: 1.5em;
  }
  
  .help-section h3 {
    font-size: 1.1em;
  }
  
  .scroll-to-top,
  .help-button {
    width: 45px;
    height: 45px;
    bottom: 15px;
    right: 15px;
    font-size: 18px;
  }
  
  .welcome-banner-content {
    flex-direction: column;
    gap: 8px;
  }
  
  .welcome-banner-buttons {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .welcome-banner-btn {
    flex: 1;
    min-width: 120px;
    font-size: 0.8em;
    padding: 5px 10px;
  }
}

/* Modal de Comentarios */
.comments-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.comments-modal-content {
  background-color: var(--bg-color);
  margin: 2% auto;
  padding: 0;
  border: 1px solid var(--text-muted);
  border-radius: 8px;
  width: 90%;
  max-width: 700px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.comments-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--text-muted);
  background-color: var(--bg-secondary);
  border-radius: 8px 8px 0 0;
}

.comments-modal-header h2 {
  margin: 0;
  font-size: 1.2em;
  color: var(--text-color);
}

.comments-modal-close {
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1.5em;
  cursor: pointer;
  padding: 5px 10px;
  transition: color 0.2s;
}

.comments-modal-close:hover {
  color: var(--link-hover);
}

.comments-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.comments-list {
  margin-bottom: 30px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
}

.comment-item {
  margin-bottom: 20px;
  padding: 15px;
  background-color: var(--bg-secondary);
  border-radius: 6px;
  border-left: 3px solid var(--primary-color);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.comment-author {
  color: var(--text-color);
  font-size: 0.95em;
}

.comment-author-admin {
  color: var(--primary-lighter);
  font-weight: 600;
}

.comment-item-admin {
  border-left-color: var(--primary-lighter);
  background-color: var(--primary-alpha-10);
}

.comment-date {
  color: var(--text-muted);
  font-size: 0.8em;
}

.comment-body {
  color: var(--text-color);
  line-height: 1.5;
  font-size: 0.9em;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.comments-loading,
.comments-empty,
.comments-error {
  text-align: center;
  color: var(--text-muted);
  padding: 20px;
  font-style: italic;
}

.comments-form-container {
  border-top: 1px solid var(--text-muted);
  padding-top: 20px;
}

.comments-form-container h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: var(--text-color);
  font-size: 1.1em;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group label {
  color: var(--text-color);
  font-size: 0.9em;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  padding: 10px;
  border: 1px solid var(--text-muted);
  border-radius: 4px;
  background-color: var(--bg-secondary);
  color: var(--text-color);
  font-size: 0.9em;
  font-family: inherit;
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px var(--primary-alpha-20);
}

.char-counter {
  text-align: right;
  font-size: 0.8em;
  color: var(--text-muted);
  margin-top: 3px;
}

.comment-error {
  background-color: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #dc3545;
  padding: 10px;
  border-radius: 4px;
  font-size: 0.9em;
}

.comment-submit-btn {
  padding: 12px 24px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.95em;
  cursor: pointer;
  transition: background-color 0.2s;
  align-self: flex-start;
}

.comment-submit-btn:hover:not(:disabled) {
  background-color: var(--primary-light);
}

.comment-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Responsive para modal de comentarios */
@media (max-width: 768px) {
  .comments-modal-content {
    width: 95%;
    margin: 5% auto;
    max-height: 95vh;
  }
  
  .comments-modal-header {
    padding: 15px;
  }
  
  .comments-modal-header h2 {
    font-size: 1em;
  }
  
  .comments-modal-body {
    padding: 15px;
  }
  
  .comments-list {
    max-height: 300px;
  }
  
  .comment-item {
    padding: 12px;
  }
  
  .comment-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}

/* =====================================================
   INFO BOX: Clima + Resumen Diario
   ===================================================== */

.info-box {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
  padding: 0;
}

.info-box.hidden {
  display: none;
}

/* Info Box Content Sections */
.info-box-content-section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1.5rem;
  width: 100%;
  grid-column: 1 / -1; /* Ocupar todo el ancho del grid */
}

/* Clases de utilidad para mostrar/ocultar secciones del InfoBox */
.info-box-content-section.hidden {
  display: none;
}

.zodiac-extras.hidden {
  display: none;
}

/* Weather Card */
.weather-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.weather-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.weather-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 0.5rem;
}

.weather-city-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
  text-align: center;
  flex: 1;
}

.weather-nav-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-color);
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.weather-nav-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.weather-current {
  text-align: center;
  margin: 1.5rem 0;
}

.weather-icon {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}

.weather-temp {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0.5rem 0;
}

.weather-desc {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.weather-details {
  display: flex;
  justify-content: space-around;
  padding: 1rem 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.weather-forecast-tomorrow {
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border-radius: 8px;
  margin-bottom: 1rem;
}

.forecast-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.forecast-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.forecast-icon {
  font-size: 1.5rem;
}

.forecast-temps {
  font-weight: 600;
  color: var(--primary-lighter);
  font-size: 0.95rem;
}

.forecast-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.weather-location-btn {
  width: 100%;
  padding: 0.75rem;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.weather-location-btn:hover {
  background: var(--primary-hover);
}

.weather-location-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Daily Summary Card */
.daily-summary-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.daily-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.daily-summary-greeting {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 1rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--primary-color);
}

.daily-summary-content {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.daily-summary-content p {
  margin: 0;
  text-align: justify;
}

.daily-summary-header {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
}

.daily-summary-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.daily-summary-text p {
  margin: 0 0 0.75rem 0;
  text-align: justify;
}

.daily-summary-text p:last-child {
  margin-bottom: 0;
}

/* Responsive: Mobile */
@media (max-width: 768px) {
  .info-box,
  .info-box-content-section {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1rem 0;
  }
  
  .weather-card,
  .daily-summary-card {
    padding: 1rem;
  }
  
  .weather-city-name {
    font-size: 1rem;
  }
  
  .weather-icon {
    font-size: 3rem;
  }
  
  .weather-temp {
    font-size: 2rem;
  }
  
  .weather-details {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  
  .forecast-info {
    justify-content: center;
    text-align: center;
  }
  
  .daily-summary-greeting {
    font-size: 1.2rem;
  }
  
  .daily-summary-content {
    font-size: 0.9rem;
  }
}

/* Responsive: Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .info-box,
  .info-box-content-section {
    grid-template-columns: 1fr;
  }
  
  .weather-card {
    max-width: 400px;
    margin: 0 auto;
  }
}

/* =====================================================
   FIN INFO BOX
   ===================================================== */


/* =====================================================
   ZODIAC INFO BOX: Horóscopo
   ===================================================== */

.zodiac-info-box {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.zodiac-card, .zodiac-prediction-card {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.zodiac-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.zodiac-nav-btn {
  background: var(--primary-color);
  border: none;
  color: var(--text-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.zodiac-nav-btn:hover {
  background: var(--primary-lighter);
  transform: scale(1.1);
}

.zodiac-sign-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.zodiac-icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
  border-radius: 50%;
}

.zodiac-sign-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-lighter);
  margin: 0;
}

.zodiac-sign-symbol {
  font-size: 2rem;
  opacity: 0.6;
}

.zodiac-birthdate-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--bg-primary);
  border-radius: 8px;
  margin-bottom: 1rem;
}

.zodiac-birthdate-form label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.birthdate-inputs {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 0.5rem;
  width: 100%;
}

.birthdate-select {
  padding: 0.75rem;
  border: 2px solid var(--primary-color);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-color);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999999' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

.birthdate-select:focus {
  outline: none;
  border-color: var(--primary-lighter);
  box-shadow: 0 0 0 3px rgba(57, 40, 136, 0.1);
}

.birthdate-select:hover {
  border-color: var(--primary-lighter);
}

/* Estilos para modo oscuro */
[data-theme="dark"] .birthdate-select,
body:not([data-theme]) .birthdate-select {
  background-color: var(--bg-secondary) !important;
  border-color: var(--primary-color);
  color: var(--text-color) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

/* Opciones del dropdown en modo oscuro - algunos navegadores no permiten estilizar esto completamente */
[data-theme="dark"] .birthdate-select option,
body:not([data-theme]) .birthdate-select option {
  background-color: #252525 !important;
  color: #ffffff !important;
}

/* Estilos para modo claro */
[data-theme="light"] .birthdate-select {
  background-color: #ffffff !important;
  border-color: var(--primary-color);
  color: #000000 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

[data-theme="light"] .birthdate-select option {
  background-color: #ffffff !important;
  color: #000000 !important;
}

.zodiac-birthdate-form input[type="date"] {
  padding: 0.75rem;
  border: none;
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-color);
  font-size: 0.95rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.zodiac-birthdate-form input[type="date"]:focus {
  outline: none;
  background: var(--bg-tertiary, var(--bg-secondary));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Modo oscuro: fondo más claro para mejor visibilidad */
[data-theme="dark"] .zodiac-birthdate-form input[type="date"] {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .zodiac-birthdate-form input[type="date"]:focus {
  background: rgba(255, 255, 255, 0.12);
}

/* Modo claro: fondo más oscuro para contraste */
[data-theme="light"] .zodiac-birthdate-form input[type="date"] {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .zodiac-birthdate-form input[type="date"]:focus {
  background: rgba(0, 0, 0, 0.08);
}

/* Estilo del icono del calendario en el input de fecha */
.zodiac-birthdate-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0); /* Negro por defecto (tema claro) */
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.zodiac-birthdate-form input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Modo oscuro: invertir el icono del calendario para que sea blanco */
[data-theme="dark"] .zodiac-birthdate-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

.btn-calculate-sign {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #8B5CF6, #6366F1);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-calculate-sign:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.zodiac-date-range {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding: 0.5rem;
  background: var(--bg-primary);
  border-radius: 6px;
  font-style: italic;
}

.zodiac-prediction-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.zodiac-prediction-title {
  font-size: 1.3rem;
  color: var(--primary-lighter);
  margin: 0 0 1rem 0;
  text-align: center;
  font-weight: 600;
}

.zodiac-prediction-content {
  flex: 1;
  line-height: 1.8;
  font-size: 1.05rem;
  color: var(--text-color);
  text-align: justify;
}

.zodiac-extras {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
  margin-top: 1rem;
}

.zodiac-extra-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
}

.zodiac-extra-item i {
  color: var(--primary-lighter);
  font-size: 1.2rem;
}

.zodiac-famous-quote {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--bg-primary);
  border-left: 4px solid var(--primary-lighter);
  border-radius: 4px;
}

.zodiac-famous-quote i {
  color: var(--primary-lighter);
  opacity: 0.5;
  margin-right: 0.5rem;
}

.zodiac-famous-quote em {
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1.6;
}

.quote-author {
  margin-top: 0.5rem;
  text-align: right;
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Responsive: Mobile */
@media (max-width: 768px) {
  .zodiac-info-box {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .zodiac-icon {
    width: 70px;
    height: 70px;
  }
  
  .zodiac-sign-name {
    font-size: 1.2rem;
  }
  
  .zodiac-sign-symbol {
    font-size: 1.5rem;
  }
  
  .zodiac-prediction-title {
    font-size: 1.1rem;
  }
  
  .zodiac-prediction-content {
    font-size: 0.95rem;
  }
}

/* Responsive: Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .zodiac-info-box {
    grid-template-columns: 1fr;
  }
  
  .zodiac-card {
    max-width: 500px;
    margin: 0 auto;
  }
}