/* =========================
   CSS NO BARRA (recuperado)
   - Cumpleaños grid + responsive
   - Reglas globales html/body
   - Layout del feed (scroll interno)
   ========================= */

/* ====== Cumpleaños ====== */
.cumpleanos-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: flex-start;
  margin: -15px;
  padding: 0;
  text-decoration: none;
}

.cumpleanos-container a { color:#000000; }
.cumpleanos-container a:hover { color:#1E90FF; }

.cumpleanos-item {
  display: flex;
  flex-direction: column;
  align-items: left;
  flex: 1 1 calc(25% - 10px);
  box-sizing: border-box;
  text-align: left;
  margin: 0;
  padding: 0;
  border: 0;
  text-decoration: none;
  border-radius: 15px;
}

.cumpleanos-item:first-child {
  flex: 1 1 100%;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}

.cumpleanos-imagen {
  width: 100%;
  height: auto;
  border-radius: 15px;
}

.cumpleanos-titulo {
  font-weight: bold;
  text-decoration: none;
  padding-bottom: 5px;
  font-size: 20px;
}

.cumpleanos-item:first-child .cumpleanos-titulo {
  font-size: 35px;
  padding: 10px 15px;
}

.cumpleanos-item:first-child .cumpleanos-fecha {
  font-size: 20px;
  padding: 0 0 10px 15px;
}

.cumpleanos-info {
  padding: 5px 5px;
}

.cumpleanos-fecha {
  font-size: 16px;
  font-weight: normal;
  margin-top: -5px;
}

/* Ajuste para pantallas medianas */
@media (max-width: 1200px) {
  .cumpleanos-item {
    flex: 1 1 calc(33.33% - 10px);
  }
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 768px) {
  .cumpleanos-item {
    flex: 1 1 calc(50% - 10px);
  }
}

/* Ajuste para pantallas muy pequeñas */
@media (max-width: 480px) {
  .cumpleanos-item {
    flex: 1 1 calc(50% - 10px);
  }
}

/* Reglas específicas por ancho */
@media (min-width: 800px) {
  .trece { display: none; }

  /* Tenías esto (inválido):
     .cumpleanos-item: { display: none; }
     Lo dejo corregido abajo SOLO si realmente querías ocultarlos.
     Si NO querías ocultarlos, borra la regla de abajo.
  */

  /* .cumpleanos-item { display: none; } */

  #cumpleanos-item-big { display: none; }
}

@media (max-width: 800px) {
  #cumpleanos-item-small { display: none; }
}

.cumpleanos_titulo {
  font-size: clamp(16px, 5vw, 36px);
  text-align: center;
  font-weight: bold;
  margin-left: -20px;
}

/* ====== Reglas globales (NO barra) ====== */
html, body {
  margin: 0;
  padding: 0;
  overflow: visible !important;
}

/* ====== Layout del feed (scroll interno) ====== */
#feed {
  position: fixed !important;
  top: 50px !important;   /* Ajusta a la altura real de tu header */
  left: 0;
  right: 0;
  bottom: 0;
  height: auto !important;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch;
}

#feed::-webkit-scrollbar {
  display: none;
}