/* ================================================================
   ZARA CALENDAR — enlaces a los otros sitios de Zara (Radio y Drop)
   Agregado en la migración al VPS (2026-09-15). Va aparte de styles.css
   para no tocar el original. Botones redondos idénticos al del tema.
   ================================================================ */
.hermano-circulo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  flex-shrink: 0;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.hermano-circulo:hover {
  color: var(--red);
  border-color: var(--border-red);
  box-shadow: 0 0 24px -6px var(--red-glow);
  transform: translateY(-1px);
}
.hermano-circulo:active { transform: translateY(0) scale(0.94); }
.hermano-circulo svg { width: 17px; height: 17px; }

/* ── La barra ya no cabía entre 901 y 1279 px en el original, y con los dos
   botones de arriba menos: se va aligerando por escalones (solo CSS). ───── */
.nav-logo { flex-shrink: 0; }
.nav-logo img { max-width: none; }

@media (max-width: 1560px) {
  .nav-inner { gap: 32px; }
  .nav-right .live-clock { display: none; }
}
@media (max-width: 1365px) {
  .btn-request-nav { width: 40px; padding: 0; justify-content: center; }
  .btn-request-nav .btn-request-label { display: none; }
  .presence-label { display: none; }
}
@media (max-width: 1215px) {
  .nav-inner { gap: 16px; }
  .nav-links { display: none; }
}
@media (max-width: 560px) {
  .nav-right { gap: 8px; }
}
@media (max-width: 680px) {
  /* «Iniciar sesión» pasa a botón redondo; el texto se queda para lectores de pantalla */
  #navAuthBtn { width: 40px; height: 40px; padding: 0; justify-content: center; gap: 0; }
  #navAuthLabel {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
@media (max-width: 400px) {
  .nav-inner { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .nav-logo img { height: 40px; }
  .nav-right { gap: 6px; }
  .hermano-circulo, .nav-right .theme-toggle, #navAuthBtn, .btn-request-nav { width: 36px; height: 36px; }
}
@media (max-width: 340px) {
  .nav-inner { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .nav-logo img { height: 34px; }
  .nav-right { gap: 4px; }
  .hermano-circulo, .nav-right .theme-toggle, #navAuthBtn, .btn-request-nav { width: 34px; height: 34px; }
}