/* ==== VARIABLES DE ESTILO ELEGANTE ==== */
:root {
  --color-fondo: #0a0014;
  --color-texto: #d3d3d3;
  --color-acento: hsl(249, 56%, 44%);
  --color-acento-claro: #4204a5;
  --color-sidebar: #0c001d;
  --color-header: #0c001d;
  --color-borde: #0f0122  ;
  --sombra-suave: 0 2px 10px rgba(0, 0, 0, 0.05);
  --radio: 6px;
  --transicion: 0.25s ease-in-out;
  --fuente-principal: 'Inter', 'Segoe UI', sans-serif;
}
/* Tamaño + espaciado de los SVG */
.icon-sidebar {
  width: 15px;
  height: 15px;
  margin-right: 7px;
  vertical-align: middle;
  color: var(--color-texto);
  transition: color var(--transicion);
}


/* Asegúrate de alinear bien el texto */
.sidebar__nav a {
  display: flex;
  align-items: center;
}

/* ==== RESETEO BÁSICO ==== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--fuente-principal);
  background-color: var(--color-fondo);
  color: var(--color-texto);
  line-height: 1.6;
  font-size: 16px;
}

/* ==== HEADER === */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #120225;
  padding: 5px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #1c0049;
  box-shadow: var(--sombra-suave);
  z-index: 1000; /* más alto que la sidebar y el contenido */
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}




.titulo {
  font-size: 1.3rem; /* antes 1.4rem */
  font-weight: 600;
  color: var(--color-acento);
}
.header__search {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header__search input {
  padding: 6px 16px;
  border: 1px solid var(--color-borde);
  border-radius: 20px;
  background: #160924;
  color: var(--color-texto);
  width: 380px; /* antes 240px */
  height: 38px;
  font-size: 15px;
  transition: var(--transicion);
}


.header__search button {
  padding: 6px 16px;
  background: var(--color-acento);
  border: none;
  border-radius: 20px;
  color: white;
  height: 38px;
  font-size: 15px;
  cursor: pointer;
  transition: var(--transicion);
}


.header__search button:hover {
  background: var(--color-acento-claro);
}

.header__acciones .btn {
  background-color: var(--color-acento);
  border: none;
  color: white;
  margin-left: 12px;
  padding: 6px 14px;
  border-radius: var(--radio);
  cursor: pointer;
  font-weight: 500;
  transition: var(--transicion);
}

.header__acciones .btn:hover {
  background-color: var(--color-acento-claro);
}

/* ==== SIDEBAR === */
.sidebar {
  position: fixed;
  top: 70px;
  left: 0;
  width: 210px;
  height: calc(100% - 80px);
  background: var(--color-sidebar);
  border-right: 1px solid #1c0049;
  padding: 20px;
}

.sidebar__nav ul {
  list-style: none;
}

.sidebar__nav li {
  margin-bottom: 10px;
}

.sidebar__nav a {

  font-size: 15px;
  text-decoration: none;
  color: var(--color-texto);
  font-weight: 500;
  transition: var(--transicion);
  padding: 8px 12px;
  border-radius: var(--radio);
  display: block;
}

.sidebar__nav a:hover {
  background-color: #1c0049;
  color: rgb(174, 168, 189);
}

/* ==== TOGGLE SIDEBAR (MÓVIL) ==== */
.toggle-sidebar {
  display: none;
  position: fixed;
  top: 20px;
  left: 20px;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  z-index: 200;
}

.toggle-sidebar span {
  width: 24px;
  height: 3px;
  background: var(--color-texto);
  display: block;
}

/* ==== CONTENIDO PRINCIPAL === */
.layout {
  margin-top: 80px; /* igual a la altura aproximada del header */
  margin-left: 220px;
  padding: 30px 40px;
}

.content-left {
  max-width: 1050px;
  margin: auto;
}

/* ==== FILTROS === */
.ordenacion {
  display: flex;
  gap: 10px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.ordenacion button {
  background: #1f1f1f;
  border: 1px solid var(--color-borde);
  color: var(--color-texto);
  padding: 8px 23px;
  border-radius: var(--radio);
  cursor: pointer;
  transition: var(--transicion);
}
@media (max-width: 768px) {

  /* Mantener header fijo */
.ordenacion button {
  background: #262131;
  border: 1px solid var(--color-borde);
  color: var(--color-texto);
  padding: 8px 13px;
  border-radius: var(--radio);
  cursor: pointer;
  transition: var(--transicion);
}
}
.ordenacion button.active,
.ordenacion button:hover {
  background: var(--color-acento);
  color: white;
}

/* ==== POSTS LIST === */
#posts-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 20px;
}

/* ==== RESPONSIVE MÓVIL + TOGGLE SIDEBAR AJUSTADO ==== */
@media (max-width: 768px) {
:root {
  --color-fondo: #06000e;
  --color-texto: #d3d3d3;
  --color-acento: #4532af;
  --color-acento-claro: #a8b4f2;
  --color-sidebar: #0c0418;
  --color-header: #0d0418;
  --color-borde: #0c021a;
  --sombra-suave: 0 2px 10px rgba(0, 0, 0, 0.05);
  --radio: 12px;
  --transicion: 0.25s ease-in-out;
  --fuente-principal: 'Inter', 'Segoe UI', sans-serif;
}
  /* Mantener header fijo */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1000;
  }

  /* Ajustar el contenido para que no quede bajo el header */
  .layout {
    margin-top: 56px; /* altura total del header en móvil */
    margin-left: 0;
    padding: 16px;
  }

  /* Sidebar deslizable */
  .sidebar {
    top: 65px; /* debajo del header fijo */
    transform: translateX(-100%);
    transition: transform var(--transicion);
    z-index: 1100;
    width: 190px;
    padding: 10px;
  height: calc(100% - 0px);


  }
  .sidebar__nav a {
  font-size: 15px;
  text-decoration: none;
  color: var(--color-texto);
  font-weight: 500;
  transition: var(--transicion);
  padding: 8px 12px;
  border-radius: var(--radio);
  display: block;
}

  .sidebar.sidebar--open {
    transform: translateX(0);
  }

  /* Ocultar texto del logo y mover solo el icono */
/* Sólo oculta el span dentro del logo */
.header__logo .titulo {
  display: none;
}

  .header__logo {
    margin-left: 48px;
  }

  /* Botón hamburguesa */
  .toggle-sidebar {
    display: flex !important;
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 4px;
    background: var(--color-acento);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sombra-suave);
    transition: background var(--transicion);
  }

  .toggle-sidebar span {
    width: 16px;
    height: 2px;
    background: white;
    border-radius: 1px;
    transition: transform var(--transicion), opacity var(--transicion);
  }
  .toggle-sidebar.open span:nth-child(1) { transform: rotate(45deg) translate(3px,3px); }
  .toggle-sidebar.open span:nth-child(2) { opacity: 0; }
  .toggle-sidebar.open span:nth-child(3) { transform: rotate(-45deg) translate(3px,-3px); }

  /* Búsqueda compacta */
  .header__search {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 8px;
  }
  .header__search input {
    width: 65px;
    height: 32px;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 16px;
  }
  .header__search button {
    margin-left: 4px;
    background: none;
    border: none;
    font-size: 1.4rem;
    padding: 4px;
    color: var(--color-texto);
  }
  .header__search button:hover {
    color: var(--color-acento);
  }

  /* Menú de usuario */
  .user-menu {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    margin-left: 0;
  }
  .avatar-header {
    width: 28px;
    height: 28px;
  }
  .user-name {
    font-size: 14px;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .btn.logout {
    padding: 4px 8px;
    font-size: 13px;
  }
}
/* ==== AVATAR PEQUEÑO Y REDONDEADO EN HEADER (ESCRITORIO) ==== */
.header__acciones .user-menu .avatar-header,
.header__acciones .avatar-header {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-acento);
}
/* Tamaño y estilo uniforme para el icono de búsqueda */
.icon-search {
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}

/* Opcional: estilos para el botón de búsqueda */
.search-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
}

.search-btn:hover .icon-search {
  color: var(--color-acento); /* o el color que prefieras */
}
.view-tabs {
  display: flex;
  gap: 12px;
  /* → ancho fijo y centrado */
  width: 800px;         /* ajusta este valor al ancho que quieras */
  max-width: 100%;      /* para que no se desborde en pantallas más pequeñas */
  margin: 0 auto 20px;  /* 0 arriba, auto centrar X, 20px abajo */
  border-bottom: 1px solid var(--color-borde);
}

.view-tabs button {
  background: none;
  border: none;
  font-family: var(--fuente-principal);
  font-size: 15px;
  padding: 10px 16px;
  color: var(--color-texto);
  cursor: pointer;
  border-radius: var(--radio) var(--radio) 0 0;
  transition: background var(--transicion), color var(--transicion);
  position: relative;
}

.view-tabs button:hover {
  background-color: var(--color-fondo);
  color: var(--color-acento);
}

.view-tabs button.active {
  color: var(--color-acento);
  background-color: #fff;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--color-acento);
}

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

  /* Mantener header fijo */
.view-tabs {
  display: flex;
  gap: 12px;
  /* → ancho fijo y centrado */
  width: 390px;         /* ajusta este valor al ancho que quieras */
  max-width: 100%;      /* para que no se desborde en pantallas más pequeñas */
  margin: 0 auto 20px;  /* 0 arriba, auto centrar X, 20px abajo */
  border-bottom: 1px solid var(--color-borde);
}
  } 
/* ==== AJUSTES PARA COMBINAR CON LA SIDEBAR ==== */
.has-submenu {
  position: relative !important;
  display: block !important;             /* ocupa todo el ancho del item */
  margin: 2px !important;                   /* sin separación extra */
  top: -8px !important;      /* mueve todo el bloque 8px hacia arriba */
  left:   12px !important;   /* lo empuja 8px hacia la derecha */


}

/* ==== BOTÓN “MIS COMUNIDADES” ==== */
.submenu-toggle {
  background: none !important;            /* transparente por defecto */
  border: none !important;
  color: var(--color-texto) !important;
  font-weight: 500 !important;
  padding: 8px 10px !important;           /* mismo padding que enlaces */
  border-radius: var(--radio) !important; /* mismo radio */
  width: 80% !important;                 /* full-width */
  text-align: left !important;
  cursor: pointer !important;
  transition: background var(--transicion) !important;
  position: relative !important;          /* referencia para el dropdown */
  z-index: 1 !important;
}
.submenu-toggle:hover,
.submenu-toggle.open {
  background: var(--color-acento) !important;
  color: white !important;
}

/* ==== DROPDOWN “MIS COMUNIDADES” ==== */
.submenu-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--color-sidebar);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  /* elimínalo si ya no lo necesitas aquí */
  z-index: 1000;
}

/* Scrollbar personalizado WebKit */
.submenu-list::-webkit-scrollbar {
  width: 6px;
}
.submenu-list::-webkit-scrollbar-track {
  background: transparent;
}
.submenu-list::-webkit-scrollbar-thumb {
  background-color: #4a0b5c;
  border-radius: 3px;
}

/* ÍTEMS DEL DROPDOWN */
.submenu-list li {
  display: flex;
  align-items: center;
  padding: 0 0;    /* vertical */
}
.submenu-list li + li {
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Enlaces como flex para centrar avatar + texto */
.submenu-list li a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-texto);
  width: 100%;
  font-weight: 500;
  transition: background var(--transicion);
  font-size: 0.85rem;
  padding: 4px 24px 4px 12px;  /* top/right/bottom/left */
  /* ↑ 24px de padding-right para separar del scrollbar */
}

/* Avatar circular más pequeño */
.submenu-list .submenu-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  flex-shrink: 0;
}

/* Hover más destacado */
.submenu-list li a:hover {
  background: var(--color-acento);
  color: white;
}

/* Botón “Ver más…” al final */
.ver-mas-item {
  text-align: center;
  padding: 4px 0;
}
.ver-mas-item button {
  background: none;
  border: none;
  color: var(--color-acento-claro);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 2px 4px;
}
.ver-mas-item button:hover {
  text-decoration: underline;
}


/* ==== POP-UP “Ver perfil” DE NICKNAME ==== */
.user-menu {
  /* Necesario para posicionar el pop-up */
  position: relative;
}
.profile-popup {
  position: absolute;
  top: calc(100% + 0px);
  left: 25px !important;
  background: var(--color-sidebar);
  color: var(--color-texto);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 4px 8px;
  font-size: 0.875rem;
  white-space: nowrap;
  box-shadow: var(--sombra-suave);
  display: none;
  z-index: 10;
}
.profile-popup.visible {
  display: block;
}
/* ==== AJUSTES PARA MÓVIL: POP-UP “Ver perfil” ==== */
@media (max-width: 768px) {
  .profile-popup {
    left: 30px !important;       /* menos margen izquierdo */
  }
}
#toast-container {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  font-size: 0.9rem;
  line-height: 1.2;
  text-align: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease-out;
  max-width: 90%;
  width: auto;
  word-break: break-word;
}

#toast-container.show {
  opacity: 1;
}

.hidden {
  display: none !important;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 480px) {
  #toast-container {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    top: 0.75rem;
    max-width: 95%;
  }
}
/* 1) Haz relativo el contenedor de la lista */
.sidebar__nav {
  position: relative;
}

/* 2) Posiciona absolutamente el ítem “Sobre ByeTich” */
.sidebar__nav .bottom-item {
  position: absolute;
  bottom: -130px;      /* distancia desde el fondo del sidebar */
  left: 0;
  right: 0;
  margin: 0;         /* elimina márgenes para que ocupe todo el ancho */
}
/* Contenedor de recursos + línea */


.recursos-header {
  position: absolute;
  bottom: -85px;    /* ajusta este valor para “subir” o “bajar” tu header */
  left: 12px;       /* igual que el padding de tus enlaces */
  right: 12px;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-texto);
}
.recursos-header hr {
  border-top: 1px solid var(--color-borde);
  margin: 3px 0 0;       /* conservas el margen superior que ya tenías */
  opacity: 0.6;

  /* NUEVO: */
  width: calc(100% + 20px);  /* 20px extra de ancho */
  margin-left: -10px;        /* desplaza 10px hacia la izquierda */
}
/* 2) Posiciona absolutamente el ítem “Sobre ByeTich” */
.sidebar__nav .bottom-item2 {
  position: absolute;
  bottom: -180px;      /* distancia desde el fondo del sidebar */
  left: 0;
  right: 0;
  margin: 0;         /* elimina márgenes para que ocupe todo el ancho */
}
/* Pestaña activa */
.sidebar__nav a.active {
  background: #2a006e;
  color: white;
}
.sidebar__nav a.active .icon-sidebar {
  stroke: white;
}
/* Añade esto al final de tu estilos.css (o donde manejes CSS global) */

/* Evitamos que capture clicks */
#nprogress {
  pointer-events: none;
}

/* Estilo de la barra: color morado, 3px de alto, y justo bajo el header */
#nprogress .bar {
  position: fixed;
  top: 70px;               /* igual al top de tu sidebar: la altura de tu header */
  left: 0;
  width: 0;                /* NProgress irá animando de 0 a 100% */
  height: 3px;             /* súper delgadita */
  background: var(--color-acento) !important;
  z-index: 1001;           /* por encima de tu header (que es 1000) */
}

/* Opcional: quita el “peg” brillante si prefieres la barra limpia */
#nprogress .peg {
  display: none;
}
.header__search {
  position: relative;
  display: inline-block;
}

.header__search input {
  padding: 0.5rem 2.5rem 0.5rem 0.5rem; /* espacio a la derecha para la lupa */
  border: 1px solid #4c4353;
  border-radius: 18px;
  font-size: 1rem;
}

.header__search .search-btn {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Opcional: cambiar color al hover */
.header__search .search-btn:hover svg {
  stroke: #555;
}
/* Por defecto: solo mostrar la búsqueda en header (desktop) */
.header__search--mobile {
  display: none;
}

/* En pantallas pequeñas (≤768px): ocultar version desktop y mostrar la móvil */
@media (max-width: 768px) {
  /* ocultamos la del header */
  .header__search--desktop {
    display: none;
  }
  /* mostramos la barra bajo el header, desplazada para no quedar tapada */
  form.header__search--mobile {
    display: flex !important;
    margin-top: 56px;      /* igual que la altura del header en móvil */
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 0.75rem 0.3rem;
    background: var(--color-header);
    border-bottom: 1px solid var(--color-borde);
    z-index: 999;          /* justo por debajo del header (1000) */
   }
  /* input llena todo el ancho */
  .header__search--mobile input {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }
  /* botón lupa ajustado */
  .header__search--mobile .search-btn {
    padding: 0.5rem;
  }
}
@media (max-width: 768px) {
  /* SUBFILTRO PRINCIPAL (Relevantes / No relevantes) */
  nav.filtro-principal {
    margin-top: -70px !important;
    margin-bottom: 0.5rem;   /* ajuste el valor a tu gusto */
  }

  /* SUBFILTRO DE TIEMPO (Hoy / Semana / Mes / Siempre) */
  nav.filtro-tiempo {
    margin-top: 0 !important;
    margin-bottom: 1rem;     /* un poco más de espacio si lo prefieres */
  }
  /* NAV DE FAVORITOS */
  #favoritos-filtros {
    margin-top: -15px !important;
    margin-bottom: 1rem;
    /* letra un poco más pequeña */
    font-size: 0.75rem;
  }

  /* si quieres afinar aún más, baja el tamaño solo de los botones */
  #favoritos-filtros button {
    font-size: 0.76rem;
    padding: 6px 12px; /* quizás también ajustar el padding */
  }
}